SOURCE CODE: Hover Fader Text Shadow Animation
VIEW EXAMPLE

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