Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

387

Від автора: одним з найбільш помітних трендів сучасного веб-дизайну є застосування ефектів паралакс-прокрутки (parallax scrolling). У цьому підручнику я маю намір показати вам, як створити на вашому власному сайті цей ефект, використавши трохи уяви і допомогу від Stellar.js.

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.jsСтворюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Вступ

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Ефект паралакса-прокрутки став популярний, коли кілька років тому такі сайти, як Nike’s Better World, представили його на своїх сторінках. Паралакс-ефект щодо інтерфейсів існує приблизно з 1980-х рр.., коли його вперше застосували в назвах відеоігор і згодом в самих іграх. Пізніше він став з’являтися в веб-інтерфейси – ви ознайомитеся з silverbackapp, який застосував цей ефект у якості заголовку.

Будучи скомбінованими з функціональністю прокрутки веб-сайту, ефекти паралакс-прокрутки надають сильну візуальну дію, особливо будучи скомбінованими з певним видом розповіді, провідним вас в подорож.

Пара…Що?

Паралакс – це зсув або розходження в видимої позиції об’єкта, що розглядається з двох різних ліній зору. – Wikipedia

Так що ж в точності такий ефект паралакса? Ну, можливо, це одна з тих речей, на які посилаються ваші клієнти, кажучи “наосліп”: “Я хочу сайт в HTML5”. Коли клієнти просять на сайт “HTML5”, мені доводиться окремо запитувати їх, що вони розуміють під HTML5 – в цей момент він здається просто модним слівцем, яке клієнти повторюють, в сутності не розуміючи його значення.

Так що HTML5 це? Звичайно, HTML5 відіграє свою роль в ефекті паралакс-прокрутки, але це не просто HTML5, в ній також використовується певна форма javascript, така як jQuery, і вона неможлива без невеликої кількості CSS3.

Спочатку слово паралакс походить від грецького параллаксис, що означає «зміна». У об’єктів, які знаходяться ближче до ока, є більший паралакс, ніж у об’єктів, що знаходяться на відстані. Це означає, що більш близькі нам об’єкти здаються рухаються швидше фонових об’єктів.

Розшарування множинних фонів і об’єктів (таких як зображення), і потім їх рух на різних швидкостях створює відчуття глибини і об’єму.

Паралакс в дії

Розгляньте кілька прикладів демонстрації паралакс-ефектів (зображення клікабельні).

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Кожен вебсайт розповідає історію

Вищенаведені приклади беруть вас у певний вид подорожі або події, і роблять це різними способами. Так, по моєму, і створюється успіх сайту з паралакс-прокруткою. Ключ до проектування цікавого і унікального творіння – зосередження на хорошій історії та концепції, а потім – застосування ефекту з допомогою творчих і образних способів.

Wieden+Kennedy (W&K), хлопці, що стоять за вебсайтом Nike Better World підтримують цю думку:

На нашу думку, технології незалежні від концепції. Ми в основному фокусувалися на створення відмінного враження від інтерактивного розповіді. – Wieden+Kennedy (W&K)

Як буде працювати наш сайт

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

Ось така у нас буде структура папок:

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Застосовані плагіни

Stellar.js

Щоб домогтися наміченого, я застосовую Stellar.js, плагін jquery від Марка Дэлглиша (Mark Dalgleish), з допомогою якого створювати сайти з паралакс-прокруткою легко і просто. В кінці статті я перерахував інші плагіни, з допомогою яких це можна зробити. Я волів використовувати Stellar.js, тому що його досить просто застосовувати і, хоча це в підручнику не показано, можна оптимізувати для роботи на платформах інтелектуальних пристроїв, таких як iOS.

Waypoints

Я також збираюся застосувати jQuery waypoints Калеба Тротона (Caleb Troughton). Waypoints – це інший плагін jQuery, виконуючий функцію при прокрутці елемента. Він дає можливість навігації сайту визначити у відповідності з положенням смуги прокрутки, на якому слайді ми знаходимося.

jQuery Easing

jQuery easing – це плагін від GSGD, що пропонує передові опції ослаблення. Ми застосуємо його, щоб при переходах від слайда до слайда отримати гарне, легке переміщення.

Розмітка 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.

Create a parallax Website using Stellar.js

Наступний елемент нашого html – зображення логотипу Envato, що знаходиться в постійному фіксованому положенні на всьому сайті. Додаємо для нього клас envatologo, щоб можна було пізніше при кодуванні CSS встановити його позиціонування.

Слайди

У чотирьох слайдів одна розмітка:

Ми застосовуємо клас slide, який буде використовуватися як загальний стиль всіх слайдів. Потім кожного слайда призначається id slide, за яким слідує номер слайда, наприклад, Slide1. Застосовуємо атрибут даних HTML5 і називаємо його data-slide. Це дозволить нам виділити його з допомогою jQuery як цільовий об’єкт. Додано інший атрибут даних data-stellar-background-ratio. Він – спеціально для плагін jQuery stellar.js і говорить того, в якому співвідношенні повинна прокручуватися швидкість елемента.

Співвідношення кореспондує звичайної швидкості прокручування, тому співвідношення в 0.5 змусить елемент прокручуватись на половинній швидкості, при співвідношенні 1 ніякого ефекту не відбудеться, а при співвідношенні в 2 елемент стане прокручуватися з подвоєною швидкістю.

У всіх слайдів, крім четвертого, є кнопка, яка дозволить нам прокручувати до наступного слайда. Ми додаємо їй атрибут data-slide зі значенням номера наступного слайда. Так кнопці стає відомо, який наступний слайд, тому можна передати значення в jQuery. У більшості слайдів, крім того, є інтервал з класом slideno; просто велика текстова версія номери слайда, який з’являється в нижньому лівому кутку більшої частини слайдів. Його також можна використовувати для назв.

Slide 1

Для третього і четвертого слайдів ми ще додаємо кілька елементів-зображень div slide. Ці зображення забезпечать справжнє розуміння створюваного нами ефекту паралакса. Ми обертаємо їх у div wrapper шириною 960px, який буде центрований, щоб гарантувати гарне відображення в моніторах десктопів всіх розмірів.

До кожного зображення прикріплений атрибут data-stellar-ratio. Він, знову ж таки, є специфічним для stellar.js і каже плагіну, в якому швидкісному співвідношенні ми повинні прокручувати елемент.

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js
Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js
Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js
Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js
Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js
Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

CSS

На щастя для нас, тут задіяно зовсім трохи CSS. Це – базові стилі декількох простих елементів, а здебільшого – позиціонування деяких елементів зображень.

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

@font-face {
font-family: ‘BebasRegular’;
src: url(‘font/BEBAS___-webfont.eot’);
src: url(‘font/BEBAS___-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘font/BEBAS___-webfont.woff’) format(‘woff’),
url(‘font/BEBAS___-webfont.ttf’) format(‘truetype’),
url(‘font/BEBAS___-webfont.svg#BebasRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
html,body{
font-family: ‘BebasRegular’;
width:100%;
height:100%;
}

Навігація

Позиція основної навігації встановлена на fixed, щоб протягом всього сайту утримувати її в одному місці. Ми робимо зверху офсет в 20px, щоб над нею було трохи вільного простору і встановлюємо z-index на 1, щоб забезпечити її перебування у верхньому шарі сайту.

Насправді весь список – це просто стилі тексту з кордоном, що проходить внизу як підкреслення. Її ширина 53px. Також доданий перехід, анимирующий стандартне стан переходів у стан наведення миші. Я скористався тут префіксом -webkit – просто для скорочення коду, а повний вихідний код, який можна завантажити вище, містить всі префікси.

Стан наведення миші застосовує ті ж властивості, що і клас active; по суті, тільки збільшення розміру і ширини шрифту. Клас active застосований jQuery для призначення стилів відповідного слайда, мабуть у вікні браузера.

.navigation {
position:fixed;
z-index:1;
top:20px;
}
.navigation li {
color:#333333;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:bold;
-webkit-transition: all .2s ease-in-out;
border-bottom:1px solid black;
text-align:left;
width:53px;
}
.navigation li:hover,
.active {
font-size:25px;
cursor:pointer;
width:100px!important;
}

Логотипу envato призначено кілька позиціонують стилів, просто для забезпечення його розташування в центрі екрану. Аналогічно навігації, йому також призначений z-index в 1, щоб він залишався зверху.

.envatologo {
position:fixed;
top:50%;
left:50%;
width:446px;
margin-top:-41px;
margin-left:-223px;
z-index:1;
}

Тепер перейдемо до стилів самих слайдів. Призначаємо їм властивість прив’язки до тла fixed. Властивість прив’язки до тла background-attachment визначає, зафіксовано чи фонове зображення або прокручується разом з іншою сторінкою, так що виявляється придатним для фонових зображень (таких, як застосовані на слайді чотири). Для цього прикладу ми використовували шпалери Філіпа Сайферта (Philipp Seiffert), які можна скачати тут. Встановлюємо позиціонування слайда на relative. Завдяки цьому ми можемо абсолютно розташувати класи slideno і button перед нею на відміну від чинного документа.

Тінь блоку застосована в суто декоративних цілях і додає до верхній внутрішній стороні кожного слайда красиву тінь.

.slide {
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper {
width:960px;
height:200px;
margin:0 auto;
position:relative;
}
.slideno {
position:absolute;
bottom:0px;
left:0px;
font-size:100px;
font-weight:bold;
color:rgba(255,255,255,0.3);
}

.button – для кнопки внизу сторінки, яка дозволяє нам перейти до наступного слайда. Ми помістили її по центру внизу кожного слайда і використовували в якості покажчика зображення стрілки.

.button{
display:block;
width:50px;
height:50px;
position:absolute;
bottom:0px;
left:50%;
background-color:#333333;
background-image:url(../images/arrow.png);
background-repeat:no-repeat;
}
.button:hover{
background-color:#494949;
cursor:pointer;
}

Стилі окремого слайда порівняно прості і кожен раз повторюють один шаблон. У першого слайда колір фону #5c9900. У другого теж є встановлений фоновий колір. Також слайд два містить зображення і кожне з них ми можемо вибрати в якості мети, застосувавши селектор CSS nth-child(n). Цей селектор можна описати як:

Цей псевдоклас підбирає елементи на підставі їх розташування усередині списку дочірніх елементів батьківського елемента.

Так що ми в загальному призначаємо стилі кожному зображенню в тому порядку, в якому вони з’являються в нашій розмітці. Ми просто розміщуємо їх щодо обгортки слайда.

/******************************
SLIDE 1
*******************************/
#slide1{
background-color:#5c9900;
}
/******************************
SLIDE 2
*******************************/
#slide2{
background-color:#005c99;
}
#slide2 img:first-child{
position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
position:absolute;
top:300px;
left:100px;
}
#slide2 img:nth-child(3){
position:absolute;
top:600px;
left:300px;
}
#slide2 img:nth-child(4){
position:absolute;
top:400px;
left:300px;
}
#slide2 img:nth-child(5){
position:absolute;
top:600px;
right:300px;
}
#slide2 img:nth-child(6){
position:absolute;
top:600px;
right:300px;
}
#slide2 img:nth-child(7){
position:absolute;
top:400px;
right:100px;
}
#slide2 img:nth-child(8){
position:absolute;
top:100px;
right:300px;
}

Слайд три варто того ж порядку, що і слайд два.

/****************************** SLIDE 3 *******************************/
#slide3 {
background-color:#b6c10b;
}
#slide3 img:first-child {
position:absolute;
top: 700px;
left: 300px;
}
#slide3 img:nth-child(2){
position:absolute;
top:100px;
left:100px;
}
#slide3 img:nth-child(3){
position:absolute;
top:150px;
left:300px;
}
#slide3 img:nth-child(4){
position:absolute;
top:450px;
left:300px;
}
#slide3 img:nth-child(5){
position:absolute;
top:200px;
right:300px;
}
#slide3 img:nth-child(6){
position:absolute;
top:100px;
right:300px;
}

Четвертий слайд злегка відрізнятися від попередніх двох, так як не містить елементів зображень і кольору фону, а замість того застосовує фонове зображення. Також ми призначили йому властивість CSS3 background-size:cover. Воно в основному встановлює фонове зображення, щоб те покривало все вікно браузера і змінює розмір по мірі зміни вікна браузера. Також ми додали рядок тексту в останньому слайді, якому призначили стилі і клас parallaxbg.

/******************************
SLIDE 4
*******************************/
#slide4{
background-image:url(../images/Slide4/desktop4.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#slide4 .parallaxbg{
position:absolute;
right:40px;
top:40px;
font-size:28px;
color:rgba(51,51,51,0.3);
}

jQuery

Насправді jQuery як раз оживляє весь дизайн. Я прокоментував код, щоб можна було бачити, що в точності відбувається.

jQuery(document).ready(function ($) {
//ініціалізувати Stellar.js
$(window).stellar();
//Кэшируйте кілька змінних
var links = $(‘.navigation’).find(‘li’);
slide = $(‘.slide’);
button = $(‘.button’);
mywindow = $(window);
htmlbody = $(‘html,body’);
//Встановіть плагін waypoints
slide.waypoint(function (event, direction) {
//кэшируйте змінну атрибута data-slide, пов’язану з кожним слайдом
dataslide = $(this).attr(‘data-slide’);
//Якщо користувач прокручує вгору, змініть навігаційну посилання, у якій той же атрибут data-slide, що у слайд, який потрібно активувати, і
//видалите клас active з попередньої посилання
if (direction === ‘down’) {
$(‘.navigation li[data-slide=”‘ + dataslide + ‘”]’).addClass(‘active’).prev().removeClass(‘active’);
}
// інакше Якщо користувач прокручує вниз, змініть навігаційну посилання, що має той же атрибут data-slide, що у слайд, який потрібно активувати, і
//видалите клас active з наступного посилання
else {
$(‘.navigation li[data-slide=”‘ + dataslide + ‘”]’).addClass(‘active’).next().removeClass(‘active’);
}
});
//waypoints не виявляє перший слайд, коли користувач прокручує назад догори, тому ми додаємо тут трохи коду, що видаляє клас
//з посилання другого слайда і додає його до навігаційної ссылке першого слайда.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$(‘.navigation li[data-slide=”1″]’).addClass(‘active’);
$(‘.navigation li[data-slide=”2″]’).removeClass(‘active’);
}
});
//Створіть функцію, якою буде переданий номер слайда, і яка потім прокрутить до цього слайда за допомогою animate від jquery. Плагін Jquery easing
// також застосовується, тому ми передали метод ослаблення ‘easeInOutQuint’, доступний в цьому плагіні.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $(‘.slide[data-slide=”‘ + dataslide + ‘”]’).offset().top
}, 2000, ‘easeInOutQuint’);
}
//При натисканні користувача з навігаційних посилань отримаєте значення посилання атрибута data-slide і передайте цю змінну функції goToByScroll
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr(‘data-slide’);
goToByScroll(dataslide);
});
// При натисканні користувача по кнопці отримаєте значення кнопки атрибута data-slide і передайте цю змінну функції goToByScroll
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr(‘data-slide’);
goToByScroll(dataslide);
});
});

Ще кілька моментів

Створюємо сайт з ефектом паралакс-прокрутки за допомогою Stellar.js

Якщо подивитися на слайд два нашого прикладу, ви помітите бульбашки в 3D. Я додав до деяких з них легке гаусівських розподілу розмиття, в основному тим, що на передньому плані, і до фонових. Поєднання їх з чітко фокусированными бульбашками додає відчуття глибини, створюваного паралаксом. При спробі створення в своєму сайті красивою глибини варто обміркувати цей момент.

Безліч сайтів, які застосовують цей ефект, мають тенденцію бути досить перевантаженими зображеннями, так що переконайтеся, що як можна сильніше стиснули свої малюнки (без втрати якості). Якщо після стискання вони все одно довго вантажаться, обміркуйте можливість додавання на свій сайт завантажувача.

Висновок

Паралакс-прокрутка в даний час – один з улюблених ефектів, і його кордони постійно розширюються. Тут і зараз я показав вам, як встановити основний вебсайт, який застосовує паралакс-прокручування. Демоверсія, показана сьогодні – це порівняно простий сайт в навчальних цілях. Тих з вас, хто ось-ось створить сайт з використанням цього ефекту, благаю витратити час на вироблення концепції та історії, тому що саме це робить його унікальним, багатокористувацьким і дійсно приносить задоволення. Застосовуйте цей ефект мудро, а не просто заради того, щоб застосувати.

Сподіваюся, вам сподобалося читати про паралакс-прокрутки, і я хотів би побачити, як ви, хлопці, застосували її на своїх сайтах, так що не соромтесь залишити на посилання нижче. Побачимося!