DIR : /home/kozerus/public_html/pn/uize/site-source/examples/hover-fader-color-effects.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 Color Effects | 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="Who needs boring menus when you can have stunning menu animations that will have your users mesmerized! You have to see these effects to believe them."/>
<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;
letter-spacing:4px;
color:#bbb;
background:#000;
border:2px solid #555;
width:182px;
padding:5px 7px;
margin-bottom:5px;
text-decoration:none;
}
</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 Color Effects
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/hover-fader-color-effects.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>In this example, an instance of the <a href="../reference/Uize.Widget.HoverFader.html"><code>Uize.Widget.HoverFader</code></a> class is wiring up a slick JavaScript animation effect to the links in a menu (to the left). A list of links in the <b>"PRESETS"</b> tab lets you preview effect presets. When you choose a preset, the <code>Uize.Widget.HoverFader</code> instance will be configured with those settings, and will be automatically "tickled" to demo the settings. Be sure to also interact with the menu, since "tickling" only demos the fade-out phase, and some effects are interesting in their fade-in phase. 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 HOVER FADER SETTINGS"</b> button to preview changes.</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">Store Locator</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;">
Blue Border Ghost Tail That Wobbles / Oscillates
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'5af',
borderLeftColor:'5af',
borderRightColor:'5af',
borderBottomColor:'5af'
},
fadeIn:{duration:500},
fadeOut:{
duration:2000,
curve:{
borderLeftColor:
Uize.Curve.Mod.blend (
10,
1,
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
4
)
),
borderTopColor:
Uize.Curve.Mod.blend (
10,
1,
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
3.5
)
),
borderRightColor:
Uize.Curve.Mod.blend (
10,
1,
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
3
)
),
borderBottomColor:
Uize.Curve.Mod.blend (
10,
1,
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
2.5
)
)
}
}
}
Fade to Black on White
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'5'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'f'},
fadeIn:{duration:250},
fadeOut:{duration:1000}
}
Hot Background Fade In, Cool Background Fade Out
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'0'},
fadeInOut:{
curve:{
backgroundColor:[
Uize.Curve.Mod.band (1,.5,0),
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,1)
]
}
},
fadeIn:{duration:500},
fadeOut:{duration:1250,reverse:false}
}
Cool Background Fade In, Hot Background Fade Out
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'0'},
fadeInOut:{
curve:{
backgroundColor:[
Uize.Curve.Mod.band (1,.5,1),
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,0)
]
}
},
fadeIn:{duration:500},
fadeOut:{duration:1250,reverse:false}
}
Sunrise and Sunset, Bg and Border Through Yellows and Reds
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'f'},
fadeInOut:{
curve:{
backgroundColor:[
Uize.Curve.Mod.band (1,1/3,2/3),
Uize.Curve.Mod.band (3,1/3,1/3),
Uize.Curve.Mod.band (1,1/3,0)
],
borderColor:[
Uize.Curve.Mod.band (3,1/3,2/3),
Uize.Curve.Mod.band (-2,1/3,1/3),
Uize.Curve.Mod.band (1,1/3,0)
]
},
reverse:true
},
fadeIn:{duration:750},
fadeOut:{duration:1500}
}
A Fading Fusion of Fuchsia and Morning Glory
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderLeftColor:'0',
borderTopColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'0',
backgroundColor:'f',
borderLeftColor:'f',
borderTopColor:'f',
borderRightColor:'f',
borderBottomColor:'f'
},
fadeInOut:{
duration:1250,
curve:{
color:Uize.Curve.easeInPow (6),
borderLeftColor:[
Uize.Curve.easeInOutPow (8),
Uize.Curve.easeInPow (2),
Uize.Curve.easeInPow (3)
],
borderTopColor:[
Uize.Curve.easeMiddlePow (4),
Uize.Curve.easeInPow (3),
Uize.Curve.easeMiddlePow (8)
],
borderRightColor:[
Uize.Curve.easeInOutPow (8),
Uize.Curve.easeInPow (3),
Uize.Curve.easeMiddlePow (5)
],
borderBottomColor:[
Uize.Curve.easeInOutPow (4),
Uize.Curve.easeInPow (9),
Uize.Curve.easeMiddlePow (2)
],
backgroundColor:[
Uize.Curve.easeInOutPow (2),
Uize.Curve.easeInPow (4),
Uize.Curve.easeMiddlePow (7)
]
}
},
fadeIn:{duration:300}
}
Flickering Pastels Background Color Fade Out
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'f'},
fadeIn:{duration:500},
fadeOut:{
duration:1250,
curve:{
backgroundColor:[
Uize.Curve.saw (3,.25),
Uize.Curve.saw (5,.25),
Uize.Curve.saw (7,.25)
]
}
}
}
Spectral Background Fade Out
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'0'},
fadeIn:{duration:500},
fadeOut:{
duration:1250,
curve:{
backgroundColor:[
Uize.Curve.Rubber.easeOutBounce (4,1,3),
Uize.Curve.Rubber.easeOutBounce (3,2,-1.5),
Uize.Curve.Rubber.easeOutBounce (3,6,1)
]
},
reverse:true
}
}
Peaches and Plums Fade Out
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'f'},
fadeInOut:{
curve:{
backgroundColor:[
Uize.Curve.Rubber.easeOutBounce (10,1,3),
Uize.Curve.Rubber.easeOutBounce (10,1.5,3.2),
Uize.Curve.Rubber.easeOutBounce (10,-2,3.4)
],
borderColor:[
Uize.Curve.Rubber.easeOutBounce (3,2,4),
Uize.Curve.Rubber.easeOutBounce (3,3,4.2),
Uize.Curve.Rubber.easeOutBounce (3,-2,4.4)
]
}
},
fadeIn:{duration:350},
fadeOut:{duration:1500}
}
Shadow After Head, With Tinges of Blue in Tail
settings::
{
defaultStyle:
{color:'b',backgroundColor:'0',borderColor:'0'},
hoverStyle:
{color:'0',backgroundColor:'f',borderColor:'f'},
fadeIn:{duration:500},
fadeOut:{
duration:1250,
curve:{
borderColor:
Uize.Curve.Mod.blend (
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutSine (),
3,
0,
true
),
-3.9
),
1,
Uize.Curve.linear
),
backgroundColor:[
Uize.Curve.Mod.blend (
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutSine (),
3,
0,
true
),
-3
),
1,
Uize.Curve.linear
),
Uize.Curve.Mod.blend (
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutSine (),
3,
0,
true
),
-3.3
),
1,
Uize.Curve.linear
),
Uize.Curve.Mod.blend (
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (
Uize.Curve.easeInOutSine (),
3,
0,
true
),
-3.5
),
1,
Uize.Curve.linear
)
]
}
}
}
Prismatic Border (each side has different color transition)
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'c',
borderLeftColor:'c',
borderRightColor:'c',
borderBottomColor:'c'
},
fadeInOut:{
curve:{
borderTopColor:[
Uize.Curve.Mod.band (1,.5,0),
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,1)
],
borderRightColor:[
Uize.Curve.Mod.band (1,.5,1),
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,0)
],
borderBottomColor:[
Uize.Curve.Mod.band (1,.5,.5),
Uize.Curve.Mod.band (1,.5,0),
Uize.Curve.Mod.band (1,.5,1)
],
borderLeftColor:[
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:1250,reverse:false}
}
Blueish Border, Clockwise Fade In, Counter-Clockwise Fade Out
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'f',
backgroundColor:'247',
borderTopColor:'06a',
borderLeftColor:'5af',
borderRightColor:'139',
borderBottomColor:'136'
},
fadeInOut:{
curve:{
backgroundColor:Uize.Curve.resolve (-3),
borderLeftColor:Uize.Curve.Mod.band (1,.25,0),
borderTopColor:Uize.Curve.Mod.band (1,.25,1/3),
borderRightColor:Uize.Curve.Mod.band (1,.25,2/3),
borderBottomColor:Uize.Curve.Mod.band (1,.25,1)
}
},
fadeIn:{duration:700},
fadeOut:{duration:1000}
}
Orange Border Blink Three Times, Then Background Lighten
settings::
{
defaultStyle:{
color:'b',
borderColor:'0',
backgroundColor:'0'
},
hoverStyle:{
color:'fd9',
borderColor:'ffa200',
backgroundColor:'752'
},
fadeIn:{
duration:1500,
curve:{
borderColor:
Uize.Curve.Mod.band (
Uize.Curve.Mod.repeat (1,5,0,true),
1/3,
0
),
backgroundColor:Uize.Curve.Mod.band (1,2/3,1)
}
},
fadeOut:{duration:1250}
}
Light Green Border Slowing Blinking, Late Background Fade In
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderColor:'0'
},
hoverStyle:{
color:'0',
backgroundColor:'afc',
borderColor:'afc'
},
fadeIn:{
duration:1500,
curve:{
backgroundColor:Uize.Curve.resolve (-9),
color:Uize.Curve.resolve (-6),
borderColor:Uize.Curve.Mod.bend (
Uize.Curve.Mod.blend (
Uize.Curve.Mod.repeat (1,17,0,1),
Uize.Curve.linear,
Uize.Curve.resolve (-3)
),
-3
)
}
},
fadeOut:{duration:1500}
}
Gold Ingots, Bevel And Background Fade at Different Rates
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'0',
backgroundColor:'eb4',
borderTopColor:'eb4',
borderLeftColor:'eb4',
borderRightColor:'eb4',
borderBottomColor:'eb4'
},
fadeInOut:{
curve:{
color:Uize.Curve.resolve (-2),
borderLeftColor:Uize.Curve.Mod.band (1,.25,1/3),
borderTopColor:Uize.Curve.Mod.band (1,.25,0),
borderRightColor:Uize.Curve.Mod.band (1,.25,1/3),
borderBottomColor:Uize.Curve.Mod.band (1,.25,1)
}
},
fadeIn:{duration:700},
fadeOut:{duration:1500}
}
Bronze to Gold Ingot Alchemy
settings::
{
defaultStyle:{
color:'eda',
backgroundColor:'753',
borderTopColor:'974',
borderLeftColor:'974',
borderRightColor:'642',
borderBottomColor:'642'
},
hoverStyle:{
color:'0',
backgroundColor:'eb4',
borderTopColor:'fd8',
borderLeftColor:'fec',
borderRightColor:'972',
borderBottomColor:'972'
},
fadeInOut:{
curve:{
color:Uize.Curve.resolve (-2),
borderLeftColor:Uize.Curve.Mod.band (1,.25,1/3),
borderTopColor:Uize.Curve.Mod.band (1,.25,0),
borderRightColor:Uize.Curve.Mod.band (1,.25,1/3),
borderBottomColor:Uize.Curve.Mod.band (1,.25,1)
}
},
fadeIn:{duration:250},
fadeOut:{duration:1000}
}
3.5 Slow Blue Background Throbs on Fade In
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderColor:'0'
},
hoverStyle:{
color:'7cf',
backgroundColor:'246',
borderColor:'248'
},
fadeIn:{
duration:4000,
curve:Uize.Curve.Mod.repeat (1,7,0,true)
},
fadeOut:{duration:1000}
}
Flickery Spectral Border Color Fade Out
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'c',
borderLeftColor:'c',
borderRightColor:'c',
borderBottomColor:'c'
},
fadeIn:{duration:500},
fadeOut:{
duration:1500,
curve:{
borderTopColor:[
Uize.Curve.saw (5,.25),
Uize.Curve.saw (7,.25),
Uize.Curve.saw (11,.25)
],
borderRightColor:[
Uize.Curve.saw (3,.25),
Uize.Curve.saw (13,.25),
Uize.Curve.saw (6,.25)
],
borderBottomColor:[
Uize.Curve.saw (4,.25),
Uize.Curve.saw (9,.25),
Uize.Curve.saw (15,.25)
],
borderLeftColor:[
Uize.Curve.saw (11,.25),
Uize.Curve.saw (13,.25),
Uize.Curve.saw (8,.25)
]
}
}
}
Aqua Flickery Border Fade Out
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'09f',
borderLeftColor:'0ff',
borderRightColor:'0ca',
borderBottomColor:'099'
},
fadeIn:{duration:500},
fadeOut:{
duration:1500,
curve:{
borderLeftColor:Uize.Curve.saw (13,.2),
borderTopColor:Uize.Curve.saw (17,.2),
borderRightColor:Uize.Curve.saw (19,.2),
borderBottomColor:Uize.Curve.saw (23,.2)
}
}
}
Aqua Border, Oscillating Tail Slows Down Towards End
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0ab',
borderLeftColor:'0ab',
borderRightColor:'0ab',
borderBottomColor:'0ab'
},
fadeIn:{duration:500},
fadeOut:{
duration:4000,
curve:{
borderLeftColor:
Uize.Curve.Mod.blend (
4,
Uize.Curve.easeMiddlePow (4),
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
-4
)
),
borderTopColor:
Uize.Curve.Mod.blend (
4,
Uize.Curve.easeMiddlePow (4),
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
-3.5
)
),
borderRightColor:
Uize.Curve.Mod.blend (
4,
Uize.Curve.easeMiddlePow (4),
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
-3
)
),
borderBottomColor:
Uize.Curve.Mod.blend (
4,
Uize.Curve.easeMiddlePow (4),
Uize.Curve.Mod.bend (
Uize.Curve.Mod.repeat (1,25,0,1),
-2.5
)
)
}
}
}
Wobbly Shape Fade Out
settings::
{
defaultStyle:{
color:'b',
backgroundColor:'0',
borderTopColor:'0',
borderLeftColor:'0',
borderRightColor:'0',
borderBottomColor:'0'
},
hoverStyle:{
color:'0',
backgroundColor:'f',
borderTopColor:'f',
borderLeftColor:'f',
borderRightColor:'f',
borderBottomColor:'f'
},
fadeIn:{duration:500},
fadeOut:{
duration:2000,
curve:{
borderTopColor:Uize.Curve.makeEaseOut (
Uize.Curve.Mod.multiply (
Uize.Curve.Mod.repeat (1,11,0,true),
1
)
),
borderRightColor:Uize.Curve.makeEaseOut (
Uize.Curve.Mod.multiply (
Uize.Curve.Mod.repeat (1,13,0,true),
1
)
),
borderBottomColor:Uize.Curve.makeEaseOut (
Uize.Curve.Mod.multiply (
Uize.Curve.Mod.repeat (1,15,0,true),
1
)
),
borderLeftColor:Uize.Curve.makeEaseOut (
Uize.Curve.Mod.multiply (
Uize.Curve.Mod.repeat (1,17,0,true),
1
)
)
}
}
}
</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.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 HOVER FADER SETTINGS',
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