lilt

a jQuery plugin for adding 3D shadows that move as you scroll!

Installation

Download Lilt and add it to the bottom of your file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/lilt.js"></script>

Start Lilt on document load:

<script>
$( document ).ready(function() { $().lilt(); });
</script>
    

Usage

Give any element the "lilt" class and you'll automatically get moving shadows on that element:

<div class="lilt">
  Hello World
</div>
      

Adjust the look and feel of your shadows using data attributes:

<div class="lilt"
 data-horizontal-offset="-20px"
 data-blur-radius="40px"
 data-spread-radius="0px"
 data-shadow-color="#999"
 data-subtleness="10">
  Hello World
</div>

Data attributes correspond to the box-shadow properties for CSS. The "data-subtleness" property is a property that controls how subtle the movement will be. The higher the number, the higher the subtlety.

Defaults

Default attributes of lilt shadows are as follows (remember to add 'data-' in front of the name if setting them through data attributes):

Attribute Name	Default	Description
horizontal-offset	-20px	horizontal offset of shadow
blur-radius	40px	blur radius of shadow
spread-radius	0px	positive values increase the size of the shadow, negative values decrease the size
shadow-color	#999999	color of the shadow
subtleness	7	subtlety of movement; the higher the number the less it will move.

You may change the defaults on any page by calling lilt with your new default options:

<script>
$( document ).ready(function() { $().lilt({
  'shadow-color': 'red',
  'horizontal-offset': '15px'
}); });
</script>

Data attributes will always take precedence over defaults.