JAVASCRIPT EXAMPLES Hover Fader Text Shadow Animation

SOURCE

This example shows how the Uize.Fx.xShadows module can be used along with the Uize.Widget.HoverFader 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 "PRESETS" 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 "PARAMS" tab to tweak values and click the "PREVIEW TEXT SHADOW ANIMATION" button to preview changes. NOTE: The CSS3 text-shadow property is not supported in all browsers.

About Us Products Services Technology Solutions My Account Locations Investors Support Contact Us

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}
                }

UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Hover Fader Text Shadow Animation

SOURCE