Fork me on GitHub

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.

It works
on images too!
works on images too!

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.