woolParalax
Плагин на jQuery для реализации эффекта паралакса на CSS3
Параметры плагина:
- type - тип эффекта ('vertical' - если эффект должен наблюдаться во время перемотки страницы, 'none' - движение слоев относительно одного стационарного блока);
- layerNav - добавляет сслыки для переключения между слоями (для типа 'vertical');
- layerClass - класс для блока, в котором должен быть реализован эффект;
- differentSides - если установлено в true, то четные и нечетные слои будут двигаться в разные стороны
Пример типа "none"
window.onload = function () { $('#wool-paralax').woolParalax(); } HTML (Demo) <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>Аттрибут data-shift - коэфициент сдвига
Пример типа "vertical"
window.onload = function () { $('#wool-paralax').woolParalax({ 'type': 'vertical' }); } HTML (Demo) <div id="wool-paralax"> <div class="wool-layer" id="first" data-shift="12" data-img="img/brickwall.png"> <div class="logo-item" data-type="floating" data-shift="-2.3"> <img src="img/2.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="2.5"> <img src="img/3.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="-2.4"> <img src="img/4.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="1.2"> <img src="img/5.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="-2.3"> <img src="img/6.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="1.2"> <img src="img/7.png" alt=""/> </div> </div> <div class="wool-layer" id="second" data-shift="6" data-img="img/tree_bark.png"> <section class="wool-layer-content"> <div id="sun" data-type="floating" data-shift="-2.6" data-offsety="40"> <img src="img/sun.png" alt=""/> </div> <div id="bear" data-type="floating" data-shift="-1.5" data-offsety="460"> <img src="img/bear.png" alt=""/> </div> <div id="bany" data-type="floating" data-shift="2.2" data-offsety="600"> <img src="img/bany.png" alt=""/> </div> <div id="wolf" data-type="floating" data-shift="-1.3" data-offsety="600"> <img src="img/wolf.png" alt=""/> </div> <div id="trees" data-type="floating" data-shift="-2.2" data-offsety="300"></div> <div id="erth" data-type="floating" data-shift="-1.4" data-offsety="460"></div> </section> </div> </div>Аттрибут data-type - показывает, что элемент должен "Плавать" внутри контейнера, data-offsety - отступ сверху для "Плавующего" элемента.
woolParalax =======
jQuery plugin for realization parallax effect on CSS3
Plugin settings:
- 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
Example for "none" type
window.onload = function () { $('#wool-paralax').woolParalax(); } HTML (Demo) <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
Example for "vertical" type
window.onload = function () { $('#wool-paralax').woolParalax({ 'type': 'vertical' }); } HTML (Demo) <div id="wool-paralax"> <div class="wool-layer" id="first" data-shift="12" data-img="img/brickwall.png"> <div class="logo-item" data-type="floating" data-shift="-2.3"> <img src="img/2.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="2.5"> <img src="img/3.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="-2.4"> <img src="img/4.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="1.2"> <img src="img/5.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="-2.3"> <img src="img/6.png" alt=""/> </div> <div class="logo-item" data-type="floating" data-shift="1.2"> <img src="img/7.png" alt=""/> </div> </div> <div class="wool-layer" id="second" data-shift="6" data-img="img/tree_bark.png"> <section class="wool-layer-content"> <div id="sun" data-type="floating" data-shift="-2.6" data-offsety="40"> <img src="img/sun.png" alt=""/> </div> <div id="bear" data-type="floating" data-shift="-1.5" data-offsety="460"> <img src="img/bear.png" alt=""/> </div> <div id="bany" data-type="floating" data-shift="2.2" data-offsety="600"> <img src="img/bany.png" alt=""/> </div> <div id="wolf" data-type="floating" data-shift="-1.3" data-offsety="600"> <img src="img/wolf.png" alt=""/> </div> <div id="trees" data-type="floating" data-shift="-2.2" data-offsety="300"></div> <div id="erth" data-type="floating" data-shift="-1.4" data-offsety="460"></div> </section> </div> </div>Attribute data-type - shows that the element has to "Float" in the container, data-offsety - space from above for "floating" of an element.
