Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.
Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum.
Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
View the full menu →

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

View the full menu →
