DIR : /home/kozerus/public_html/pn/uize/site-source/examples/hover-fader-text-shadow-animation.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hover Fader Text Shadow Animation | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="featured color animation menu Uize.Widget.HoverFader"/>
<meta name="description" content="Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.tabs.css"/>
<link rel="stylesheet" href="css/selector-links.css"/>
<link rel="stylesheet" href="css/params-table.css"/>
<link rel="stylesheet" href="css/params-inspector.css"/>
<style type="text/css">
#page-paramsInspector .tabShell {
width:480px;
}
#page_paramsInspector_settings {
width:400px;
height:286px;
font-size:12px;
}
#page_paramsInspector_preview {
width:466px;
}
.menuLinks {
position:relative;
width:200px;
background:#364040;
padding:10px;
padding-bottom:5px;
}
.menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
display:block;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
letter-spacing:4px;
color:#bbb;
background:#000;
border:2px solid #000;
width:182px;
padding:5px 7px;
margin-bottom:5px;
text-decoration:none;
overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Hover Fader Text Shadow Animation
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/hover-fader-text-shadow-animation.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>This example shows how the <a href="../reference/Uize.Fx.xShadows.html"><code>Uize.Fx.xShadows</code></a> module can be used along with the <a href="../reference/Uize.Widget.HoverFader.html"><code>Uize.Widget.HoverFader</code></a> class to produce stunning menu animation effects that include text shadow animation (seen in the menu to the left). A list of links in the <b>"PRESETS"</b> tab lets you preview effect presets. Choose a preset from this menu and you will see a simulation of the effect. Then move your mouse over the menu items to interact with the effect. To fool around with the settings for a preset, switch over to the <b>"PARAMS"</b> tab to tweak values and click the <b>"PREVIEW TEXT SHADOW ANIMATION"</b> button to preview changes. <b>NOTE:</b> The CSS3 <code>text-shadow</code> property is not supported in all browsers.</p>
</div>
<!-- page layout's "wireframe" with slot for params inspector -->
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div class="menuLinks">
<a href="javascript://" class="menuLink">About Us</a>
<a href="javascript://" class="menuLink">Products</a>
<a href="javascript://" class="menuLink">Services</a>
<a href="javascript://" class="menuLink">Technology</a>
<a href="javascript://" class="menuLink">Solutions</a>
<a href="javascript://" class="menuLink">My Account</a>
<a href="javascript://" class="menuLink">Locations</a>
<a href="javascript://" class="menuLink">Investors</a>
<a href="javascript://" class="menuLink">Support</a>
<a href="javascript://" class="menuLink">Contact Us</a>
</div>
</td>
<td id="page-paramsInspector"></td>
</tr>
</table>
</div>
<textarea id="page_paramsInspector-inlinePresets" style="display:none;">
Shifting Aqua Blur
settings::
{
defaultStyle:{
color:'0',
backgroundColor:'045',
textShadow:'#0ff -30px 0 .5em,#0ff 30px 0 .5em,#0f0 -20px 0 1em,#0f0 20px 0 1em'
},
hoverStyle:{
color:'afb',
backgroundColor:'000',
textShadow:'#003 -10px 0 .5em,#00f 10px 0 .5em,#0ff -30px 0 1em,#0ff 30px 0 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
Nothing to Strong Glow
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
textShadow:'0em -.2em .3em #0, 0em .2em .3em #0, -.3em 0em .4em #0, .3em 0em .4em #0'
},
hoverStyle:{
color:'0',
backgroundColor:'8',
textShadow:'0em -.2em .3em #f, 0em .2em .3em #f, -.3em 0em .4em #f, .3em 0em .4em #f'
},
fadeIn:{duration:250},
fadeOut:{duration:1000}
}
White Glow to Black Glow
settings::
{
defaultStyle:{
color:'0',
backgroundColor:'6',
textShadow:'0em -.2em .3em #a, 0em .2em .3em #a, -.4em 0em .4em #a, .4em 0em .4em #a'
},
hoverStyle:{
color:'b',
backgroundColor:'6a9',
textShadow:'0em -.2em .3em #033, 0em .2em .3em #033, -.4em 0em .4em #033, .4em 0em .4em #033'
},
fadeIn:{duration:200},
fadeOut:{duration:1000}
}
Drop Shadow to Slight Glow
settings::
{
defaultStyle:{
color:'f',
backgroundColor:'6',
textShadow:'#0 .3em .3em .3em'
},
hoverStyle:{
color:'0',
backgroundColor:'6a9',
textShadow:'#f 0em 0em .3em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
White Stroke on Gray BG, to Orange Stroke on Black BG
settings::
{
defaultStyle:{
color:'#000',
backgroundColor:'#888',
textShadow:'-1 0 1 #fff, 1 0 1 #fff,0 -1 1 #fff, 0 1 1 #fff'
},
hoverStyle:{
color:'#000',
backgroundColor:'#000',
textShadow:'-1 0 1 #f95, 1 0 1 #fc0,0 -1 1 #ff0, 0 1 1 #f00'
},
fadeIn:{duration:300},
fadeOut:{duration:1200}
}
Aqua Blur
settings::
{
defaultStyle:{
color:'f',
backgroundColor:'0',
textShadow:'#0 0px 0 0em,#0 0px 0 0em,#0 0px 0 0em,#0 0px 0 0em'
},
hoverStyle:{
color:'0',
backgroundColor:'045',
textShadow:'#0ff -30px 0 .5em,#0ff 30px 0 .5em,#0f0 -20px 0 1em,#0f0 20px 0 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
Widening Green Blur
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'000',
textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
},
hoverStyle:{
color:'f',
backgroundColor:'044',
textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
Burnished and Swirly
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'000',
textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
},
hoverStyle:{
color:'fb9',
backgroundColor:'420',
textShadow:'-3 0 3 #0,3 0 3 #0,#f90 -25 -5 .5em,#ff0 25 5 .5em,#f96 -20 5 1em,#fc9 20 -5 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
Burnished and Rubbery and Bouncy
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'000',
textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
},
hoverStyle:{
color:'fb9',
backgroundColor:'420',
textShadow:'-3 0 3 #0,3 0 3 #0,#f90 -25 -5 .5em,#ff0 25 5 .5em,#f96 -20 5 1em,#fc9 20 -5 1em'
},
fadeIn:{
duration:1500,
curve:Uize.Curve.Rubber.easeOutElastic (.2)
},
fadeOut:{
duration:2500,
curve:Uize.Curve.Rubber.easeOutBounce (4,1,1)
}
}
Swirling Ghost Shadow and Outer Glow
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'0',
textShadow:'0 0 0 #0,-1 -1 3 #0,1 1 3 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'344',
textShadow:'-40 -20 12 #cff,-1 -1 3 #abd,1 1 3 #adb'
},
fadeInOut:{
curve:{
color:Uize.Curve.resolve (10),
backgroundColor:Uize.Curve.resolve (5),
textShadow:[
{
offsetX:Uize.Curve.Rubber.easeOutElastic (.2),
offsetY:Uize.Curve.Rubber.easeOutElastic (.3)
},
Uize.Curve.resolve (12),
Uize.Curve.resolve (14)
]
}
},
fadeIn:{duration:2500},
fadeOut:{duration:2500,reverse:false}
}
Psychelic Clown
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'0',
textShadow:'0 1 3 #0,-15 4 7 #0,-10 5 7 #0,55 -10 5 #0,-7 20 7 #0,-200 20 7 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'004',
textShadow:'0 1 3 #ffa,-35 4 7 #ff0,10 5 7 #0f0,35 0 5 #f0f,-7 10 7 #0ff,10 -7 7 #0f0'
},
fadeInOut:{
curve:{
color:Uize.Curve.resolve (5),
textShadow:[
Uize.Curve.resolve (10),
Uize.Curve.resolve (2),
Uize.Curve.resolve (3),
Uize.Curve.resolve (-2),
Uize.Curve.resolve (-3),
Uize.Curve.resolve (3)
]
}
},
fadeIn:{duration:700},
fadeOut:{duration:1000}
}
Metallic Luminescent Light Burst
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'0',
textShadow:'0 0 15 #0,0 0 15 #0,0 0 15 #0,0 0 15 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'566',
textShadow:'-10 0 9 #cff,10 0 9 #ccf,0 -6 9 #cfc,0 6 9 #ccc'
},
fadeIn:{
duration:5000,
curve:{
color:Uize.Curve.resolve (15),
backgroundColor:Uize.Curve.Rubber.easeOutElastic (.15),
textShadow:[
Uize.Curve.Rubber.easeOutElastic (.08),
Uize.Curve.Rubber.easeOutElastic (.085),
Uize.Curve.Rubber.easeOutElastic (.09),
Uize.Curve.Rubber.easeOutElastic (.095)
]
}
},
fadeOut:{
duration:1000,
curve:{
color:Uize.Curve.resolve (6),
backgroundColor:Uize.Curve.resolve (2)
}
}
}
Sci-fi Materialize
settings::
{
defaultStyle:{
color:'8aa',
backgroundColor:'0',
textShadow:'300 0 1 #0,-300 0 1 #0,0 40 1 #0,0 -40 1 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'687',
textShadow:'-10 0 9 #cff,10 0 9 #ccf,0 -6 9 #cfc,0 6 9 #ccc'
},
fadeIn:{
duration:5000,
curve:{
color:Uize.Curve.resolve (15),
textShadow:[
Uize.Curve.Rubber.easeOutElastic (.08),
Uize.Curve.Rubber.easeOutElastic (.085),
Uize.Curve.Rubber.easeOutElastic (.09),
Uize.Curve.Rubber.easeOutElastic (.095)
]
}
},
fadeOut:{
duration:1500,
curve:{
color:Uize.Curve.resolve (6),
backgroundColor:Uize.Curve.resolve (2)
}
}
}
Parting of the Blue Green Sea
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'0',
textShadow:'0 0 10 #0,0 0 10 #0,0 0 10 #0,0 0 10 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'067',
textShadow:'-200 0 10 #09f,200 0 10 #0f9,-200 -40 10 #0ff,200 -40 10 #7fc'
},
fadeInOut:{
duration:800,
curve:{
color:Uize.Curve.resolve (4),
textShadow:[
{color:Uize.Curve.resolve (3)},
{color:Uize.Curve.resolve (2)},
{color:Uize.Curve.resolve (2)},
{color:Uize.Curve.resolve (3)}
]
}
}
}
Spectral Converging Dots, With Fleeting Fuchsia Tinge
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'0',
textShadow:'-30 0 2 #0,30 0 2 #0,0 10 2 #0,0 -10 2 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'6',
textShadow:'-10 0 15 #f,10 0 15 #f,0 -10 15 #f,0 10 15 #f'
},
fadeInOut:{
curve:{
color:Uize.Curve.resolve (-2),
backgroundColor:[
Uize.Curve.Mod.band (1,.3,.8),
Uize.Curve.Mod.band (1,.3,1),
Uize.Curve.Mod.band (1,.3,.7)
],
textShadow:[
{
color:[
Uize.Curve.Mod.band (1,.5,0),
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,1)
]
},
{
color:[
Uize.Curve.Mod.band (1,.5,1),
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,0)
]
},
{
color:[
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,0),
Uize.Curve.Mod.band (1,.5,1)
]
},
{
color:[
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,1),
Uize.Curve.Mod.band (1,.5,0)
]
}
]
}
},
fadeIn:{duration:500},
fadeOut:{duration:1000}
}
Wobbly Vertical Moving Glow, Vapor Trail Fade Out
settings::
{
defaultStyle:{
color:'8',
backgroundColor:'0',
textShadow:'-50 -30 9 #0,50 -20 9 #0,-20 -10 9 #0,20 10 9 #0'
},
hoverStyle:{
color:'0',
backgroundColor:'f',
textShadow:'-50 0 9 #f,50 0 9 #f,-20 0 9 #f,20 0 9 #f'
},
fadeIn:{
duration:4000,
curve:{
color:Uize.Curve.resolve (10),
backgroundColor:Uize.Curve.resolve (-1.5),
textShadow:[
Uize.Curve.Rubber.easeOutElastic (.2),
Uize.Curve.Rubber.easeOutElastic (.17),
Uize.Curve.Rubber.easeOutElastic (.08),
Uize.Curve.Rubber.easeOutElastic (.06)
]
}
},
fadeOut:{
duration:3000,
curve:{
backgroundColor:Uize.Curve.resolve (20)
}
}
}
Bounce Fade In White Glow
settings::
{
defaultStyle:{
color:'0',
backgroundColor:'789',
textShadow:'-200 0 5 #0,200 0 5 #0,0 -100 5 #0,0 100 5 #0'
},
hoverStyle:{
color:'f',
backgroundColor:'345',
textShadow:'-1 0 5 #a,1 0 5 #a,0 -1 5 #a,0 1 5 #a'
},
fadeIn:{
duration:2000,
curve:{
color:Uize.Curve.resolve (10),
backgroundColor:Uize.Curve.resolve (10),
textShadow:Uize.Curve.Rubber.easeOutBounce (7,-6,1.8)
}
},
fadeOut:{
duration:2000,
curve:{
color:Uize.Curve.resolve (2),
backgroundColor:Uize.Curve.resolve (-3),
textShadow:Uize.Curve.resolve (5)
}
}
}
Ripe Tangerine Glow
settings::
{
defaultStyle:{
color:'0',
backgroundColor:'920',
textShadow:'-20px 0 2em #ff0,-10px -4px 2em #ff0,0 -6px 2em #f00,20px 0 2em #9f0,10px 0 2em #f6f,0 6px 2em #ff0'
},
hoverStyle:{
color:'f',
backgroundColor:'0',
textShadow:'0 0 0em #9,0 0 0em #9,0 0 0em #9,0 0 0em #9,0 0 0em #9,0 0 0em #9'
},
fadeIn:{duration:350},
fadeOut:{duration:500}
}
</textarea>
<!-- JavaScript code to make the static HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'UizeSite.ParamsInspector.InlinePresets',
'Uize.Fx.xShadows',
'Uize.Curve',
'Uize.Curve.Rubber',
'Uize.Curve.Mod',
'Uize.Widget.HoverFader',
'Uize.Json'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** create the hover fader instance ***/
page.addChild ('hoverFader',Uize.Widget.HoverFader,{nodes:{className:/\bmenuLink\b/}});
/*** create the params inspector widget ***/
var lastSettings;
page.addChild (
'paramsInspector',
UizeSite.ParamsInspector.InlinePresets,
{
params:{settings:'string-multiline'},
previewButtonText:'PREVIEW TEXT SHADOW ANIMATION',
settingsPropertyName:'settings'
}
).wire (
'Preset Selected',
function () {
var settings = page.children.paramsInspector.getValues ().settings;
if (settings != lastSettings)
page.children.hoverFader.set (
Uize.copyInto ({fadeInOut:null,fadeIn:null,fadeOut:null},Uize.Json.from (lastSettings = settings))
)
;
page.children.hoverFader.tickle ({duration:600,curve:Uize.Curve.resolve (1.3)});
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer