woolParalax - Realization parallax effect on CSS3

Download   Demo

woolParalax is a jQuery plugin for realization parallax effect on CSS3

1. INCLUDE JS FILES

<script src="js/libs/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="js/paralax.js" type="text/javascript"></script>

2. HTML

<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 class="wool-layer" data-shift="0.05">
 <img src="img/4.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.06">
 <img src="img/5.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.07">
 <img src="img/6.png" alt="" />
 </div>
 <div class="wool-layer" data-shift="0.08">
 <img src="img/7.png" alt="" />
 </div>
</div>

Attribute data-shift - shift coefficient

Attribute data-type - shows that the element has to “Float” in the container, data-offsety - space from above for “floating” of an element.

3. JAVASCRIPT

window.onload = function () 
 $('#wool-paralax').woolParalax(
 'type': 'vertical'
 );

4. OPTIONS

• type - type effect (‘vertical’ – if the effect has to be observed during page rewind, ‘none’ – movement of layers concerning one stationary block);


• layerNav - Adds references for switching of layers (for ‘vertical’ type);


• layerClass - block class, in which the effect has to be realized;


• differentSides - if is true, that even and odd layers will move in different directions

woolParalax - Realization parallax effect on CSS3