Простой эффект прокрутки с параллаксом на CSS3

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



В этом уроке я покажу, как мы можем построить простой сайт с параллаксом с помощью нескольких строк javascript-кода и CSS. Итак, давайте приступим.

Шаг 1. HTML
Первый шагом будет добавление фоновых изображений и классов к ним, кроме этого добавляем параметры data-speed, которые необходимы нам для создания данного эффекта:

1

2

3

4

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



Шаг 2. CSS
Теперь нам необходимо определить параметры для каждого изображения, кроме этого изображения будут полностью адаптивными, при сохранении эффекта

1
#home {
2
background: url("../images/home.jpg");
3
background-attachment: fixed;
4
background-origin: initial;
5
background-clip: initial;
6
background-size: cover;
7
background-repeat:no-repeat;
8
background-position:100% 0;
9
position:relative;
10
min-height:1080px;
11
}
12
#about {
13
background: url("../images/about.jpg");
14
background-attachment: fixed;
15
background-origin: initial;
16
background-clip: initial;
17
background-size: cover;
18
background-repeat:no-repeat;
19
background-position:100% 0;
20
position:relative;
21
min-height:1080px;
22
}
23
#blog {
24
background: url("../images/blog.jpg");
25
background-attachment: fixed;
26
background-origin: initial;
27
background-clip: initial;
28
background-size: cover;
29
background-repeat:no-repeat;
30
background-position:100% 0;
31
position:relative;
32
min-height:1080px;
33
}
34
#contact {
35
background: url("../images/contact.jpg");
36
background-attachment: fixed;
37
background-origin: initial;
38
background-clip: initial;
39
background-size: cover;
40
background-repeat:no-repeat;
41
background-position:100% 0;
42
position:relative;
43
min-height:1080px;
44
}

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

Шаг 3. JS
Основная идея заключается в переходе слайдов с разной скоростью, пока страница прокручивается вверх или вниз. Это может быть достигнуто лишь с помощью нескольких строчек кода. Ниже приводится javascript код, который использует HTML5 селектор типов данных, чтобы все слайды и наборы фоновых позиций каждой страницы прокручивались вверх или вниз.

1
jQuery(document).ready(function(){
2
$objWindow = $(window);
3
$('div[data-type="background"]').each(function(){
4
var $bgObj = $(this);
5
$(window).scroll(function() {
6
var yPos = -($objWindow.scrollTop() / $bgObj.data('speed'));
7
var coords = '100% '+ yPos + 'px';
8
$bgObj.css({ backgroundPosition: coords });
9
});
10
});
11
});

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

Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.