Всем привет, сегодня расскажу о хорошем плагине для создания параллакс эффекта при перемещении курсора мыши на указанном блоке. Плагин хоть и с первого взгляда кажется немного запутанный, но это только по началу, в этой статье постараюсь более подробно и точно описать весь его функционал и его возможности.

Итак первое что мы делаем это конечно подключаем все необходимые скрипты и стили — 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;
}

Это как один из многочисленный вариантов которые можно придумать, другие примеры можно посмотреть в демо.

Настройки

Аналогично что и xparallax только работает с осью YСудя в описании плагина когда анимация параллакса прекращается то устанавливается указанный класс, но я этого не заметил и добиться этого к сожалению не смог.
ПараметрПо умолчаниюОписание параметра
mouseportjQuery(document)Указывается класс или id блока в виде: jQuery(«#mouseport»), именно при наведении на этот указанный блок будет срабатывать параллакс эффект, можно указать совсем другой блок, подробности есть в демо.
xparallaxtrueВключает или отключает движение слоя по оси Х. Так же можно указать смещение по оси Х. Варианты: boolean | 0-1 | ‘n%’ | ‘npx’
yparallaxtrue
xorigin0.5Данное свойство похоже css свойство background-position. Варианты записи параметра: 0-1 | ‘n%’ | ‘left’, ‘center’, ‘middle’, ‘right’
yorigin0.5Данное свойство похоже css свойство background-position. Варианты записи параметра: 0-1 | ‘n%’ | ‘top’, ‘center’, ‘middle’. ‘bottom’
freezeClass‘freeze’
decay0,66Задержка перемещения элемента вслед за мышкой, диапазон значений от 0 до 1
frameDuration30Время анимации, указывается в миллисекундах
widthundefinedИзменяет ширину слоя, но не изменяет сам объект, указывается в пикселях без приставки px
heightundefinedИзменяет высоту слоя, но не изменяет сам объект, указывается в пикселях без приставки px

Возможно вас это заинтересует
comments powered by HyperComments