Всем привет, сегодня расскажу о хорошем плагине для создания параллакс эффекта при перемещении курсора мыши на указанном блоке. Плагин хоть и с первого взгляда кажется немного запутанный, но это только по началу, в этой статье постараюсь более подробно и точно описать весь его функционал и его возможности.
Итак первое что мы делаем это конечно подключаем все необходимые скрипты и стили – jquery.parallax.css и jquery.parallax.min.js и естественно сам jQuery
Вообще файл со стилями можно не подключать, а просто скопировать в другой файл для экономии места, кол-ва запросов подключений к серверу и т.д.(оптимизаторам видней))). В этом файле всего 2 стиля, ниже о них расскажу.
HTML структура и jQuery код.
Насколько я понял html структуру можно создавать как вам угодно, но обязательно нужно каждый слой создавать в отдельном теге и все это деле обернуть контейнером, примеры(примеры взяты из демо страниц):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <ul id="parallax"> <li class="parallax-layer"></li> <li class="parallax-layer"></li> </ul> <!-- или --> <div class="parallax-viewport" id="parallax1"> <!-- parallax layers --> <div class="parallax-layer" style="width:860px; height:273px;"> <img src="images/parallax_sketch/0_sun.png" alt="" style="position:absolute; left:300px; top:-12px;"/> </div> <div class="parallax-layer" style="width:920px; height:274px;"> <img src="images/parallax_sketch/1_mountains.png" alt="" /> </div> <div class="parallax-layer" style="width:1100px; height:284px;"> <img src="images/parallax_sketch/2_hill.png" alt="" style="position:absolute; top:40px; left:0;" /> </div> <div class="parallax-layer" style="width:1360px; height:320px;"> <img src="images/parallax_sketch/3_wood.png" alt="" style="position:absolute; top:96px; left:0;"/> </div> </div> <!-- или --> <div id="parallax2"> <img class="parallax-layer" src="../images/parallax_drops/0.png" alt="" style="width:978px; height:325px;"/> <img class="parallax-layer" src="../images/parallax_drops/1.png" alt="" style="width:987px; height:328px;"/> <img class="parallax-layer" src="../images/parallax_drops/2.png" alt="" style="width:1001px; height:333px;"/> <img class="parallax-layer" src="../images/parallax_drops/3.png" alt="" style="width:1031px; height:343px;"/> <img class="parallax-layer" src="../images/parallax_drops/4.png" alt="" style="width:1067px; height:355px;"/> <img class="parallax-layer" src="../images/parallax_drops/5.png" alt="" style="width:1120px; height:373px;"/> <img class="parallax-layer" src="../images/parallax_drops/6.png" alt="" style="width:1200px; height:400px;"/> </div> |
И дальше включаем наш плагин:
1 | jQuery( '.parallax-layer' ).parallax( options ); |
Внимание, указываем селектор слоев, а не контейнера.
Немного о CSS
Как уже писал в начале статьи в css файле всего 2 стиля:
1 2 3 4 5 6 7 8 9 | <style> .parallax-viewport { position: relative; /* relative, absolute, fixed */ overflow: hidden; } .parallax-layer { position: absolute; } </style> |
Стиль .parallax-layer добавляется к каждому слою что позволяет ему свободно перемещаться в блоке.
Стиль .parallax-viewport можно добавлять по желанию на контейнер со слоями. Он создает своего рода окно внутри которого при перемещении мыши слои будут двигаться, а то что выходит за рамки окна не будет видно благодаря свойству overflow: hidden;, но еще нужно указать высоту контейнера иначе оно будет 0px. В итоге должно получится примерно следующий код стиля для блока контейнера:
1 2 3 4 5 6 7 | .parallax-viewport { background: rgb(47, 49, 52); margin: 1.5em 0px; overflow: hidden; position: relative; height: 300px; } |
Это как один из многочисленный вариантов которые можно придумать, другие примеры можно посмотреть в демо.
Настройки
| Параметр | По умолчанию | Описание параметра |
|---|---|---|
| mouseport | jQuery(document) | Указывается класс или id блока в виде: jQuery(“#mouseport”), именно при наведении на этот указанный блок будет срабатывать параллакс эффект, можно указать совсем другой блок, подробности есть в демо. |
| xparallax | true | Включает или отключает движение слоя по оси Х. Так же можно указать смещение по оси Х. Варианты: boolean | 0-1 | ‘n%’ | ‘npx’ |
| yparallax | true | Аналогично что и xparallax только работает с осью Y|
| xorigin | 0.5 | Данное свойство похоже css свойство background-position. Варианты записи параметра: 0-1 | ‘n%’ | ‘left’, ‘center’, ‘middle’, ‘right’ |
| yorigin | 0.5 | Данное свойство похоже css свойство background-position. Варианты записи параметра: 0-1 | ‘n%’ | ‘top’, ‘center’, ‘middle’. ‘bottom’ |
| freezeClass | ‘freeze’ | Судя в описании плагина когда анимация параллакса прекращается то устанавливается указанный класс, но я этого не заметил и добиться этого к сожалению не смог.|
| decay | 0,66 | Задержка перемещения элемента вслед за мышкой, диапазон значений от 0 до 1 |
| frameDuration | 30 | Время анимации, указывается в миллисекундах |
| width | undefined | Изменяет ширину слоя, но не изменяет сам объект, указывается в пикселях без приставки px |
| height | undefined | Изменяет высоту слоя, но не изменяет сам объект, указывается в пикселях без приставки px |