Создание веб-сайта с эффектом параллакс-прокрутки при помощи Stellar.js

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

Введение

Эффект параллакс-прокрутки был популярен с того времени, как сайты вроде Better World Nike добавили его на своих страницах несколько лет назад. Что касается интерфейсов, то эффект параллакса начали  использовать где-то с 1980-х, когда им впервые воспользовались в заголовках видео-игр и в дальнейшем в самих играх. Совсем недавно он стал появляться в веб-интерфейсах – примером может послужить silverbackapp, где этот эффект был использован в качестве части заголовка.

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

Пара... Что?

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

Так что же именно из себя представляет эффект параллакса? Хорошо, это, пожалуй, одна из вещей, которую ваши клиенты упоминают, когда вслепую говорят «Я хочу, чтобы в моем сайте был HTML5». Каждый раз, когда клиенты просят меня сделать сайт с "HTML5", мне приходится специально у них уточнять, что они понимают под HTML5 – на данный момент похоже, что это просто модное словечко, которое клиенты продолжают говорить мне, в действительности не понимая его смысла.

Так что же, это HTML5? Безусловно, HTML5 действительно играет роль в реализации эффекта параллакс-прокрутки, однако это не только HTML5, для него также используется та или иная форма Javascript, например jQuery, и вы не смогли бы его создать без чуточки CSS3.

Само слово parallax происходит от Греческого παραλλαξη (parallaxis), что означает изменение. Объекты, расположенные ближе к наблюдателю, обладают большим параллаксом, чем те, что расположены вдалеке. Это означает, что нам может казаться, что объекты, расположенные ближе к нам, движутся быстрее тех, что расположены на заднем плане.

За счет наслоения множества планов и объектов (например изображений) и последующего изменения скорости их движения создается ощущение глубины восприятия (трехмерности).

Параллакс в действии

Взгляните на некоторые примеры, демонстрирующие эффекты параллакса.

Каждый веб-сайт рассказывает историю

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

Wieden+Kennedy (W&K), разработчики веб-сайта Better World Nike, разделяют это мнение:

По нашему мнению, технологии независимы от общего представления. Наша основная задача заключалась в том, чтобы создать замечательный интерфейс, повествующий историю. – Wieden+Kennedy (W&K)

Как будет работать наш сайт

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

Ниже показано, как будет выглядеть структура папок для нашего веб-сайта:

Используемые плагины

Stellar.js

Чтобы мне легче было достичь цели руководства, я использую Stellar.js, плагин jQuery, разработанный Mark Dalgleish, при помощи которого облегчается создание веб-сайтов с эффектом параллакс-прокрутки. Чтобы помочь вам в этом, имеются и другие плагины, которые я перечислил внизу этого руководства. Я решил использовать Stellar.js, поскольку с его помощью довольно просто создать веб-сайт с эффектом параллакс-прокрутки и, хотя этого и не показано в этом руководстве, его можно оптимизировать для работы на платформах интеллектных устройств вроде iOS.

Waypoints.js

Также я буду использовать плагин jQuery Waypoints.js, разработанный Caleb Troughton. Это еще один плагин jQuery, при помощи которого функция выполняется каждый раз, когда вы прокручиваете страницу к элементу. За счет этого становится возможным указать при помощи навигационного меню на веб-сайте, на каком слайде мы находимся в соответствии с позицией полосы прокрутки.

jQuery Easing

jQuery easing – плагин, разработанный GSGD, который предоставляет продвинутые варианты сглаживания (* от англ. еasing; изменение анимации с течением времени). Мы будем его использовать для добавления изящного сглаживания при переходе от одного слайда к другому.

HTML-разметка

Сначала мы добавляем в нашем index.html HTML5 doctype (* тип документа) и затем создаем раздел head. В нем содержится CSS Reset (* таблица стилей для сбрасывания значений свойств стилей, применяемых браузером по умолчанию), за которой следует наша таблица стилей 'styles.css'. Затем мы добавляем библиотеку jQuery, после которой идет наш собственный jQuery-файл 'js.js'. Далее следуют три плагина: 'jquery.stellar.min.js','waypoints.min.js' и 'jquery.easing.1.3.js'.

1

<!DOCTYPE HTML>

2

<html>

3

<head>

4

<meta charset="utf-8">

5

<title>Create a parallax Website using Stellar.js</title>

6

7

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

8

<link rel="stylesheet" type="text/css" href="css/style.css">

9

10

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

11

<script type="text/javascript" src="js/js.js"></script>

12

<script type="text/javascript" src="js/jquery.stellar.min.js"></script>

13

<script type="text/javascript" src="js/waypoints.min.js"></script>

14

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

15

16

</head>

Следующий элемент в нашем HTML-документе – изображение логотипа Envato, которое остается в неизменной фиксированной позиции везде на сайте. Для этого элемента мы добавляем класс 'envatologo', чтобы у нас была возможность задать его позиционирование позднее, при написании кода CSS.

1

<img class="envatologo" src="images/envatologo.png">

Слайды

Для четырех слайдов используется та же самая разметка:

1

2

	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">  		  		  		

3

		<a class="button" data-slide="2" title=""></a>  	

4

	</div><!--End Slide 1-->

Мы добавляем класс 'slide', правила которого будут использованы в качестве общего стилевого оформления для всех слайдов. Далее каждому слайду добавляется id 'slide', за которым следует номер, то есть 'slide1'. Мы используем атрибут HTML5 Data и называем его 'data-slide'. За счет этого мы сможем получить слайд при помощи jQuery. Добавляется еще один атрибут HTML5 Data 'data-stellar-background-ratio'. Он предназначен для плагина jQuery stellar.js и сообщает ему, с каким соотношением скорости должен прокручиваться элемент.

Соотношение задается относительно обычной скорости прокрутки, так что при соотношении, равном 0.5, элемент прокручивался бы вдвое медленнее, при соотношении, равном 1, скорость была бы той же, и при соотношении, равном 2, элемент прокручивался бы вдвое быстрее.

У всех слайдов, за исключением четвертого, имеется кнопка, при помощи которой можно будет прокрутить страницу к следующему слайду. Для нее мы добавляем атрибут 'data-slide' со значением номера следующего слайда. Это делается для того, чтобы в кнопке была информация о том, какой слайд следующий, благодаря чему мы бы могли передать это значение jQuery. В большинстве слайдов также имеется строчный элемент span с классом 'slideno' – просто крупная текстовая версия числа слайда, отображаемая в нижнем левом углу большинства слайдов. Он мог бы быть также использован для добавления заголовков.

1

<span class="slideno">Slide 1</span>

В третьем и четвертом слайдах мы также добавляем кое-какие элементы для добавления изображений в div с классом 'slide'. Эти изображения придадут реалистичность создаваемому нами эффекту. Мы оборачиваем их в div с классом 'wrapper', который будет отцентрирован и в качестве значения ширины которого устанавливается значение '960px'; мы делаем это только для того, чтобы убедиться, что он нормально отображается на десктопных мониторах всех размеров.

Для каждого изображения добавлен атрибут 'data-stellar-ratio'. Опять-таки он предназначен для плагина stellar.js и сообщает ему, с каким соотношением скорости нам необходимо прокручивать элемент.

1

<div class="wrapper">

2

3

			<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">

4

			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">

5

			<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">

6

			<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">

7

			<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">

8

			<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">

9

10

</div>

Код CSS

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

Первое, что нам необходимо выполнить в коде CSS, – подключить шрифт BEBAS при помощи @font-face. Затем мы добавляем его для html, чтобы задать шрифт для сайта. Также мы задаем в качестве значений ширины и высоты html и body 100%. За счет этого наши слайды смогут занять всю ширину и высоту экрана пользователя.

1

2

@font-face {  

3

	font-family: 'BebasRegular';  

4

	src: url('font/BEBAS___-webfont.eot');  

5

	src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),     

6

	url('font/BEBAS___-webfont.woff') format('woff'),     

7

	url('font/BEBAS___-webfont.ttf') format('truetype'),     

8

	url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');  

9

	font-weight: normal;  

10

	font-style: normal;  

11

	}  

12

13

html,body{ 

14

	font-family: 'BebasRegular';  	

15

	width:100%;  	

16

	height:100%;  

17

}

Навигационное меню

Для главного навигационного меню в качестве значения position задано 'fixed', чтобы оно оставалось на том же самом месте везде на сайте. Мы задаем для него отступ сверху величиной 20px, чтобы добавить немного пространства выше него, и устанавливаем в качестве значения z-index 1, чтобы гарантировать, что меню располагается на верхнем слое сайта.

Стилевое оформление для элемента списка представляет из себя просто стилевое оформление для текста и границы вдоль нижней части элемента, которая выступает в качестве подчеркивания. В качестве ширины этого элемента задано 53px. Также добавлен переход, благодаря которому выполняется анимация элемента из его нормального состояния в состояние, когда поверх него перемещен курсор. Я воспользовался здесь префиксом -webkit-, просто чтобы длина кода оставалась небольшой, однако в полном исходном коде, который вы можете скачать, перейдя по ссылке выше, указаны префиксы всех вендоров.

Для состояния элемента, когда поверх него перемещен курсор, используются те же правила, что и для класса 'active'; по сути это правила просто для увеличения размера шрифта и ширины элемента. Класс 'active' используется jQuery для задания стилевого оформления соответственного слайда, который находится в окне просмотра.

1

2

.navigation {  	

3

	position:fixed;  	

4

	z-index:1;  	

5

	top:20px;  

6

}  

7

.navigation li {  	

8

	color:#333333;  	

9

	display:block;  	

10

	padding: 0 10px;  	

11

	line-height:30px;  	

12

	margin-bottom:2px;  	

13

	font-weight:bold;  	

14

	-webkit-transition: all .2s ease-in-out;  	

15

	border-bottom:1px solid black;  	

16

	text-align:left;  	

17

	width:53px;  

18

}  

19

.navigation li:hover,

20

.active {  	

21

	font-size:25px;  	

22

	cursor:pointer;  	

23

	width:100px!important;  

24

}

Для логотипа Еnvato заданы кое-какие стилевые правила для позиционирования просто для того, чтобы гарантировать, что он остается в центре экрана. Как и в случае с навигационным меню, для логотипа в качестве значения свойства z-index задано '1', чтобы гарантировать то, что он располагается на верхнем слое.

1

2

.envatologo {  

3

	position:fixed;  

4

	top:50%;  

5

	left:50%;  

6

	width:446px;  

7

	margin-top:-41px;  

8

	margin-left:-223px;  

9

	z-index:1;  

10

}

Теперь мы переходим к стилевому оформлению для непосредственно слайдов. Мы добавляем для них свойство background-attachment со значением 'fixed'. При помощи свойства background-attachment определяется, находится ли фоновое изображение в фиксированной позиции или же прокручивается с остальной частью страницы, так что оно оказывается полезным для фоновых изображений (например того, что использовано в четвертом слайде). В нашем примере мы воспользовались обоями (* фоновое изображение (или видеофрагмент), хранящееся в .ВМР-файле), созданными Philipp Seiffert, которые вы можете скачать здесь. В качестве значения свойства position слайда мы установили 'relative'. Это сделано для того, чтобы мы могли задать абсолютное позиционирование для элементов с классами 'slideno' и 'button' относительно положения слайда, а не собственно документа.

Свойство box shadow используется исключительно для того, чтобы приукрасить наш сайт, и за счет него добавляется изящная падающая тень к верхней вставке каждого слайда.

1

.slide {

2

	background-attachment: fixed;

3

	width:100%;

4

	height:100%;

5

	position: relative;

6

	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);

7

}

8

.wrapper {

9

	width:960px;

10

	height:200px;

11

	margin:0 auto;

12

	position:relative;

13

}

14

.slideno {

15

	position:absolute;

16

	bottom:0px;

17

	left:0px;

18

	font-size:100px;

19

	font-weight:bold;

20

	color:rgba(255,255,255,0.3);

21

}

Класс .button используется для кнопки внизу страницы, за счет которой мы можем перейти к следующему слайду. Мы разместили ее внизу по центру каждого слайда и воспользовались изображением стрелки в качестве указателя.

1

.button{

2

	display:block;

3

	width:50px;

4

	height:50px;

5

	position:absolute;

6

	bottom:0px;

7

	left:50%;

8

	background-color:#333333;

9

	background-image:url(../images/arrow.png);

10

	background-repeat:no-repeat;

11

}

12

.button:hover{

13

	background-color:#494949;

14

	cursor:pointer;

15

}

Стилевое оформление для каждого отдельного слайда относительно простое и каждый раз задается согласно одному и тому же шаблону. Для первого слайда в качестве значения цвета фона задано '#5c9900'. Для второго слайда также установлено некоторое значение цвета фона. Также второй слайд содержит изображения, и мы можем получить каждое при помощи селектора CSS nth-child(n). Его можно описать следующим образом:

При помощи этого псевдо-селектора элементы отбираются в зависимости от их позиции в списке дочерних элементов родительского элемента.

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

1

/******************************

2

 SLIDE 1 

3

*******************************/

4

#slide1{

5

	background-color:#5c9900;

6

7

}

8

/******************************

9

 SLIDE 2 

10

*******************************/

11

#slide2{

12

	background-color:#005c99;

13

14

}

15

#slide2 img:first-child{

16

	position:absolute;

17

top: 700px;

18

left: -150px;

19

}

20

#slide2 img:nth-child(2){

21

	position:absolute;

22

	top:300px;

23

	left:100px;

24

}

25

#slide2 img:nth-child(3){

26

	position:absolute;

27

	top:600px;

28

	left:300px;

29

}

30

#slide2 img:nth-child(4){

31

	position:absolute;

32

	top:400px;

33

	left:300px;

34

}

35

#slide2 img:nth-child(5){

36

	position:absolute;

37

	top:600px;

38

	right:300px;

39

}

40

#slide2 img:nth-child(6){

41

	position:absolute;

42

	top:600px;

43

	right:300px;

44

}

45

#slide2 img:nth-child(7){

46

	position:absolute;

47

	top:400px;

48

	right:100px;

49

}

50

#slide2 img:nth-child(8){

51

	position:absolute;

52

	top:100px;

53

	right:300px;

54

}

Для третьего слайда стилевое оформление задается тем же образом, как и для второго.

1

2

/****************************** SLIDE 3 *******************************/  

3

#slide3 {  	

4

	background-color:#b6c10b;  

5

}  

6

#slide3 img:first-child {  	

7

	position:absolute;  

8

	top: 700px;  

9

	left: 300px; 

10

}  

11

#slide3 img:nth-child(2){  	

12

	position:absolute;  	

13

	top:100px;  	

14

	left:100px;  

15

}  

16

#slide3 img:nth-child(3){  	

17

	position:absolute;  	

18

	top:150px;  	

19

	left:300px;  

20

}  

21

#slide3 img:nth-child(4){  	

22

	position:absolute;  	

23

	top:450px;  	

24

	left:300px; 

25

}  

26

#slide3 img:nth-child(5){  	

27

	position:absolute;  	

28

	top:200px;  	

29

	right:300px;  

30

}  

31

#slide3 img:nth-child(6){  	

32

	position:absolute;  	

33

	top:100px;  	

34

	right:300px;  

35

}

Четвертый слайд немного отличается от предыдущих тем, что не содержит каких-либо элементов для добавления изображений или окрашенного фона, а в нем используется фоновое изображение. Также мы задали для него свойство background-size со значением cover. За счет него собственно делается так, чтобы фоновое изображение занимало все окно просмотра и изменяло свой размер в зависимости от размера окна браузера. Также мы добавили в последнем слайде, для которого задали стилевое оформление, строку с текстом и установили для содержащего ее элемента класс 'parallaxbg'.

1

/******************************

2

 SLIDE 4 

3

*******************************/

4

5

#slide4{

6

	background-image:url(../images/Slide4/desktop4.jpg);

7

	-webkit-background-size: cover;

8

	-moz-background-size: cover;

9

	-o-background-size: cover;

10

	background-size: cover;

11

}

12

#slide4 .parallaxbg{

13

	position:absolute;

14

	right:40px;

15

	top:40px;

16

	font-size:28px;

17

	color:rgba(51,51,51,0.3);

18

}

Код jQuery

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

1

2

jQuery(document).ready(function ($) {

3

4

5

    //initialise Stellar.js

6

    $(window).stellar();

7

8

    //Cache some variables

9

    var links = $('.navigation').find('li');

10

    slide = $('.slide');

11

    button = $('.button');

12

    mywindow = $(window);

13

    htmlbody = $('html,body');

14

15

16

    //Setup waypoints plugin

17

    slide.waypoint(function (event, direction) {

18

19

        //cache the variable of the data-slide attribute associated with each slide

20

        dataslide = $(this).attr('data-slide');

21

22

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 

23

        //remove the active class from the previous navigation link 

24

        if (direction === 'down') {

25

            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');

26

        }

27

        // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 

28

        //remove the active class from the next navigation link 

29

        else {

30

            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');

31

        }

32

33

    });

34

35

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 

36

    //from navigation link slide 2 and adds it to navigation link slide 1. 

37

    mywindow.scroll(function () {

38

        if (mywindow.scrollTop() == 0) {

39

            $('.navigation li[data-slide="1"]').addClass('active');

40

            $('.navigation li[data-slide="2"]').removeClass('active');

41

        }

42

    });

43

44

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery

45

    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.

46

    function goToByScroll(dataslide) {

47

        htmlbody.animate({

48

            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top

49

        }, 2000, 'easeInOutQuint');

50

    }

51

52

53

54

    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function

55

    links.click(function (e) {

56

        e.preventDefault();

57

        dataslide = $(this).attr('data-slide');

58

        goToByScroll(dataslide);

59

    });

60

61

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function

62

    button.click(function (e) {

63

        e.preventDefault();

64

        dataslide = $(this).attr('data-slide');

65

        goToByScroll(dataslide);

66

67

    });

68

69

70

});

Пара советов

Если вы взгляните на третий слайд нашего примера, то заметите 3D-пузырьки. Я добавил небольшое размытие по Гауссу (* результат размывания изображения в соответствии с функцией Гаусса. Широко используется для снижения шума и детализации) для некоторых из них, главным образом для тех, что располагаются на самом переднем и заднем планах. Эффект, создаваемый за счет совмещения их с четко сфокусированными пузырьками, дополняет ощущение глубины, создаваемое эффектом параллакса. Это то, на что вам, вероятно, необходимо обратить внимание при попытке создать на вашем сайте хорошее ощущение глубины.

На многих сайтах, использующих этот эффект, действительно используется довольно много изображений, поэтому убедитесь, что сжали их насколько это возможно (без ущерба для качества). Если после сжатия на их загрузку по-прежнему уходит довольно много времени, то подумайте о добавлении предварительного загрузчика (* загрузчик; по сути это то, что вы видите на экране, пока остальная часть контента страницы все еще загружается. Часто представляет из себя простую или сложную анимацию, которая используется для того, чтобы пользователи оставались вовлеченными, пока завершается выполнение операций на стороне сервера) на ваш сайт.

Заключение

Эффект параллакс-прокрутки – один из наиболее любимых за последнее время, и люди постоянно делают что-то новое при помощи него. Сегодня в этом руководстве я показал вам, как создать простейший веб-сайт, на котором используется эффект параллакс-прокрутки. Демоверсия, которую я вам сегодня показал, представляет из себя относительно простой сайт, созданный с учебными целями. Тем, кто собирается создать сайт с этим эффектом, советую потратить больше времени на разработку общего представления и истории, поскольку именно за счет этого сайт становится уникальным и таким, которым хочется делиться и от просмотра которого пользователи действительно получают удовольствие. Суть состоит в том, как использовать этот эффект разумно, а не просто в том, чтобы использовать его ради галочки.

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

Ссылки на посты и ресурсы для дальнейшего изучения темы

• Behind the Scenes at Nikes Better World.
• 21 Examples of Parallax Scrolling Websites.
• Scrollorama A parallax plugin with some other great features.
• Create a Sticky Navigation Header Using jQuery Waypoints