Как создать простой Parallax эффект

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

Параллакс эффект прокрутки

See the Pen EPqjvR by Dmitry (@xozblog) on CodePen.

Разметка HTML

Для начала нам понадобятся некоторая разметка HTML, содержимое страницы будет помещено в section, а также понадобится еще div, который будет содержать фон.

1
2
3
4
5
<div class="bg"></div>
<section>
<h1>Home page</h1>
<p>We are a fairly small, flexible design
.........

На разметке особо внимание не заостряем, так как она нужна лишь для прокрутки страницы. Переходим к CSS.

Правила CSS

Правил CSS, необходимых для создания эффекта параллакса, на самом деле мало. В первую очередь необходимо установить фоновое изображение в div и зафиксировав, потому что действия прокрутки будут применяться с помощью JQuery. Затем мы устанавливаем ширину 100% и высоту 300%, чтобы div был больше, чем высота страницы. Мы позиционируем его в верхнем левом и, наконец, дать ему Z-индекс -1 убедиться, что она оказывается под текстом.

1
2
3
4
5
6
7
8
9
.bg {
  background: url('bg.jpg') repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -1;
}

jQuery

От JQuery мы хотим добиться прокрутки фона на более низкой скорости, чем прокрутка основного контента. Для этого создадим функцию которая будет вызываться во время прокрутки страницы:

1
2
3
4
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*0.2)+'px');
}

Сначала помещаем в переменную количество пикселей прокрутки от начала страницы. Теперь, чтобы сделать прокрутку фона с меньшей скоростью, добавляем к свойству top блока div значение переменной умноженное на коэффициент (чем ближе к 0 тем медленнее).

И последний штрих, эта функция вызывается во время прокрутки страницы.

1
2
3
$(window).scroll(function(e){
  parallax();
});

На этом все.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!