Smooth Parallax Effects with jQuery and CSS3 - woolParalax

Smooth Parallax Effects with jQuery and CSS3 - woolParalax
File Size: 1.27 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.