SOURCE CODE: Hover Fader Text Shadow Animation

  
  
  
  
  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

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