Створення веб-сайту з ефектом паралакс-прокручування за допомогою 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 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 визначається, чи знаходиться фонове зображення у фіксованій позиції або ж прокручується з рештою сторінки, так що воно стає у пригоді для фонових зображень (наприклад того, що використано у четвертому слайді). У нашому прикладі ми скористалися шпалерами (* зображення у форматі бітових карт (розширення .bmp); фонове зображення, що зберігається у .ВМР-файлі та виводиться у вікні ОС з графічним інтерфейсом користувача, таких як Windows, OS/2), створеними 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