Smooth Parallax Effects with jQuery and CSS3 - woolParalax

woolParalax is a simple jQuery plugin used to create a smooth parallax effect from a set of DIV layers as you scroll down the page or move the mouse.

More examples:

• With mouse interaction
• With 'vertical' option.

How to use it:

1. Load the latest version of jQuery javascript library and the jQuery woolParalax plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/paralax.js" type="text/javascript"></script>

2. Create a set of DIV layers with data-shift attribute to specify the movement speed for each layer.

<div id="wool-paralax">
<div class="wool-layer" data-shift="0.02"> <img src="img/1.png" alt="" /> </div>
<div class="wool-layer" data-shift="0.03"> <img src="img/2.png" alt="" /> </div>
<div class="wool-layer" data-shift="0.04"> <img src="img/3.png" alt="" /> </div>
...
</div>

3. Don't forget to set the position: absolute to the DIV layers in your CSS.

.wool-layer {
  position: absolute;
}

4. Initialize the plugin with default settings.

$('#wool-paralax').woolParalax();

5. Options.

'type': 'none', //none, horizont, vertical
'layerNav': true, // for vertical option
'layerClass': '.wool-layer',
'differentSides': true // even and odd layers will move in different directions

---

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