jQuery Plugin To Create Parallax Like 3D Scrolling Shadows - lilt.js

lilt.js is a very small jQuery plugin for creating 3D background shadows to make your elements move with a familiar parallax scrolling effect as you scroll down the page.

How to use it:

1. Load the jQuery lilt.js script after jQuery JavaScript library

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="lilt.js"></script>

2. Config the parallax shadows using Html5 data-* attributes for your elements.

<div class="lilt"
     data-shadow-color="#999999"
     data-horizontal-length="-20px"
     data-blur-radius="5px" 
     data-spread-radius="5px"
     data-subtleness="7"
>
  DIV CONTENT GOES HERE
</div>

3. Initialize the plugin and we're done.

$().lilt();

4. You can also pass the shadow options via JavaScript during initialization.

$().lilt({

// horizontal offset of shadow
'horizontal-offset': "-20px",

// blur radius of shadow
'blur-radius': "40px",

// positive values increase the size of the shadow, 
// negative values decrease the size
'spread-radius': "0px",

// color of the shadow
'shadow-color': "#999999",

// subtlety of movement; 
// the higher the number the less it will move.
'subtleness': "7"

});

---

This awesome jQuery plugin is developed by jimmylorunning. For more Advanced Usages, please check the demo page or visit the official website.