Animate Your Shadows

Text-Shadow Animation

Document Hover

NuvuShadow Text-Shadow - Document Hover - This shadow will move when the cursor moves around the page.

Self Hover

NuvuShadow Text-Shadow - Self Hover this shadow will move when hovering over the text and stop moving on hover out

Box-Shadow Animation

Outer Box-Shadow:

This box-shadow will move when you move your cursor around the page. The farther you get from the box(div) the more offset and spread the shadow will become.

Inset Box-Shadow:


This box-shadow is using the inset option. The shadow appears inseted inside the box. It will move when you move your cursor around the page. The farther you get from the box(div) the more offset and spread the shadow will become.

Text-Shadow Tutorial:

Include the jQuery and nuvushadow.js scripts in head tag

?
1
2
<script type="text/javascript" src="js/jquery-1.6.1.min.html"></script>
<script type="text/javascript" src="js/jquery.nuvushadow.js"></script>

Include the Javascript with options on the page.

?
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){ //make sure the javascript is always wrapped in a document on ready jQuery function
  $('.sometext').nuvushadow({  // target an element with the class of "sometext"
          area: document,   //the area that moves the shadow on hover set to document ot '.thisH1'
          type: 'text',   //set to 'text' for using text-shadow effect
          shadowColor: '#000',  //color of shadow
          shadowSpread: 61.1,   //spread of the shadow - smaller the number the more spread - larger the less spread(harder density)
          xgravity: 28,   //how much x will shift - higher then number the more centered it will stay
          ygravity: 29,    //how much y will shift - higher then number the more centered it will stay
 
 
    });
  });

Add HTML element

?
1
2
3
<body>
<p class="sometext">Here is some text that will get a animating text-shadow!</p>
</body>

Box-Shadow Tutorial:

Include the jQuery and nuvushadow.js scripts in head tag

?
1
2
<script type="text/javascript" src="js/jquery-1.6.1.min.html"></script>
<script type="text/javascript" src="js/jquery.nuvushadow.js"></script>

Include the Javascript with options on the page.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){ //make sure the javascript is always wrapped in a document on ready jQuery function
  $('.somebox').nuvushadow({  // target an element with the class of "sometext"
          area: document,    //the area that moves the shadow on hover set to document ot '.thisDiv'
          type: 'box',     //set to 'box' if using box-shadow effect
          shadowSpread: 5.1, //the spread of the shadow(density) the smaller the number the softer the spread - larger the harder the spread(less spread)
          xgravity: 20,  //how much x will not shift - higher then number the more centered it will stay
          ygravity: 10,   //how much y will not shift - higher then number the more centered it will stay
          shadowColor: '#000',  //shadow color
          shadowSize: 1, //how large the shadow will be the lower the smaller the shadow
          boxinset: 'false', //set to 'true' for box-shadow inset or 'false' for no inset
 
 
    });
  });

Add HTML element

?
1
2
3
<body>
<div class="somebox">Here is some text that will get a animating box-shadow!</div>
</body>