Создание эффекта параллакса на jparallax.js

Опубликовано 19.05.2019

Эффект параллакса довольно интересно смотрится на сайте ипривлекает внимание пользователей. Рассмотрим как можно реализовать у себя на сайте такой эффект. Мы будем использовать библиотеки jQuery и jParallax.

Первым делом подготовим изображения, которые мы хотим видеть в эффекте параллакса. Формат изображений должен быть png с прозрачным фоном.

Подключаем к странице библиотеки:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>

Затем формируем структуру HTML:

<div id="parallax">
  <div style="width: 700px; height: 300px;">
    <img src="images/fon.jpg" alt="" style="width: 700px;"/>
  </div>
  <div style="width: 725px; height: 290px;">
    <img src="images/molnia.png" alt="" style="position:absolute; top:-100px; left:330px; width: 300px;"/>
  </div>
  <div style="width: 750px; height: 280px;">
    <img src="images/thor.png" alt="" style="position:absolute; top:0px; left:350px; width: 200px;"/>
  </div>
  <div style="width: 760px; height: 273px;">
    <img src="images/iron.png" alt="" style="position:absolute; top:0px; left:580px; width: 134px;"/>
  </div>
  <div style="width: 760px; height: 273px;">
    <img src="images/info-less.png" alt="" style="position:absolute; top:70px; left:60px; width: 310px;"/>
  </div>
  <div style="width: 776px; height: 266px;">
    <img src="images/fire.png" alt="" style="position:absolute; top:50px; left:0px; width: 800px;"/>
  </div>
  <div style="width: 800px; height: 250px;">
    <img src="images/kap.png" alt="" style="position:absolute; top:100px; right:106px; width: 220px;"/>
  </div>
</div>

Тут стоит обратить внимание на то что в CSS для каждого элемента должна быть прописана ширина и высота, а также позиционирование относительно краев элементов (top, bottom, left, right).

Добавим стиль к элементу #parallax:

#parallax {
  background: #ccc; 
  position: absolute; 
  overflow: hidden;
  width: 700px; 
  height: 300px; 
  left: 23%;   
  top: 25%; 
  border: 5px solid #101010;
  background: #c3c3c3; 
  padding: 0px;  
}

Далее вызывыем функцию javascript которая будет запускать эффект параллакса:

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("#parallax").jparallax({});
  });
</script>

На этом работа завершена. Смотрим что получилось.

Демо