woolParalax - Realization parallax effect on CSS3

woolParalax is a jQuery plugin for realization parallax effect on CSS3

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

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