Вертикальна і горизонтальна прокрутка на fullPage.js

20

Від автора: у наші дні все більше сайтів вибирають односторінковий дизайн (або односторінкові сайти). У цій статті ми покажемо, як створити такий сайт і скористаємося для цього всіма перевагами fullPage.js.

Поглянути на демо можна за посиланням Codepen. А в додатку до всього файли демо можна знайти в репозиторії на Github.

Що з себе представляє fullPage.js?

fullPage.js це JQuery плагін, який призначений для створення односторінкових сайтів з прокруткою. Написаний плагін веб-розробником Alvaro Trigo, включає в себе величезний набір по налаштуванню. Також з плагіном поставляється дуже зручна документація з робочими прикладами.

До ще більшого щастя плагін працює не тільки в сучасних браузерах, але і в таких, як IE8 і Opera 12. І, врешті-решт, я думаю, ви захочете глянути на WordPress версію.

Приступаємо до роботи з fullPage.js

Перед тим, як почати, завантажте і встановіть наступні файли: Бібліотека JQuery (≥1.6.0), jquery.fullPage.css, jquery.fullPage.js або його минифицированную версію jquery.fullPage.min.js

Знайти їх можна за посиланням на Github і завантажити за допомогою спеціального менеджера (Bower) або з допомогою CDN (cdnjs). У нашому уроці скористаємося останнім варіантом. Скопіюйте посилання нижче в хедер сайту:

…і скрипти перед закриваючим тегом body:

Створюємо секції Fullpage

Насамперед необхідно визначити секції нашого сайту. Для цього ми додамо до елементів клас section і обернем цей блок контейнер з унікальним ID. Пізніше ID нагоді для отримання об’єкта fullPage. За замовчуванням плагін робить активної першу секцію, але це можна змінити, додавши клас active до необхідної секції. Нижче HTML нашого прикладу:

fullPage.js

Перша секція

Перестрибнути на останній слайд

Зверніть увагу, що всім секціях присвоєно клас vertical-scrolling, це зроблено для того, щоб розрізняти секції між собою. У нашому випадку ми повинні повідомити плагіну про зміни у процесі ініціалізації.

Створення горизонтальних слайдів

Кожна з вертикальних секцій може також розташовуватися в горизонтальному положенні з одним або декількома слайдами. Для створення слайда необхідно додати клас slides до необхідного елементу в секції. Крім усього іншого, важливо звернути увагу на те, що чисто технічно перший слайд є також і першою секцією. Нижче ми розглянемо це детальніше! Повернемося до нашого прикладу, нижче код показує, як створити два слайди в секції:

fullPage.js

П’ята секція перший слайд

fullPage.js

другий слайд

Спасибі, всі пролистано!

Ще раз, як видно, ми додаємо наш клас horizontal-scrolling до слайдів.

Налаштовуємо зовнішній вигляд сайту

Налаштувати зовнішній вигляд секцій і слайдів можна за допомогою вбудованих можливостей нашого плагіна. Один з таких параметрів це властивість sectionColor, з його допомогою можна легко встановити CSS властивість background-color для всіх секцій.

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

section:nth-of-type(2) {
background: url(‘https://unsplash.it/1910/1221?image=626’) no-repeat center / cover;
}

Налаштовуємо навігацію

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

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

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 1px solid #24221F;
}

А ще нижче скріншот, в якому показані зміни, які ми вчинили:

Вертикальна і горизонтальна прокрутка на fullPage.js

Стилі за замовчуванням і наші стилі

Зверніть увагу на те, що ми включили наші стилі в окремий файл, щоб не змінювати CSS файл плагіна.

Створюємо посилання на секції і слайди

fullPage.js дозволяє змінити посилання на нашому сайті, щоб ми могли переміщатися між різними секціями. Для цього використовується параметр anchor – це масив, що містить якоря, які потрібно відображати в засланні до кожної секції. Приміром, у нашому прикладі будуть такі якоря (вони повинні бути унікальні):

anchors: [‘firstSection’, ‘secondSection’, ‘thirdSection’, ‘fourthSection’, ‘fifthSection’]

При знаходженні в першій секції в кінці нашого ДО а буде #firstSection, у другій секції буде #secondSection і т. д.

Таким же чином плагін модифікує ДО и під час прокручування слайдів. А тепер пора згадати про те, що наш перший слайд (з індексом 0) також є і секцією. Не можна забувати, коли ми будемо на першому слайді п’ятої секції, наш URL буде закінчуватися на #fifthSection.

При прокрутці на другий слайд в тій же секції посилання зміниться на #fifthSection/1, так як другий слайд (з індексом 1) по суті як «перший» слайд. Варто сказати, що ми можемо змінити якоря, додавши атрибут data-anchor з потрібним нам ім’ям (яке теж повинно бути унікальним), як у прикладі нижче:

Зверніть увагу: якщо ви хочете подивитися, як змінюються посилання, подивіться демо Debug View.

Прописуємо посилання на секції і слайди в меню

Щоб краще зрозуміти, як додати в меню fullPage, поглянемо на нашу фіксовану шапку. Скріншот нижче показує, як вона виглядає:

Вертикальна і горизонтальна прокрутка на fullPage.js

Your Logo

При натисканні на іконку гамбургера зверху спливає меню:

Вертикальна і горизонтальна прокрутка на fullPage.js

Код меню:

Щоб дати знати нашу fullPage про меню необхідно додати ID menu. Далі необхідно прописати посилання на відповідні секції. Для цього необхідно додати атрибут data-menuanchor зі значенням посилання на секцію. При збігу даних значень плагін додає клас active до відповідного пункту меню.

Вертикальна і горизонтальна прокрутка на fullPage.js

Важливо зауважити, що поки що плагін не додає клас active до слайдів. Щоб це виправити, можна скористатися JQuery (найкраще рішення) або CSS. У нашому прикладі ми використовуємо CSS:

body.fp-viewing-fifthSection-1 #menu li:last-child a {
background: #453659;
}

Результат показаний нижче:

Вертикальна і горизонтальна прокрутка на fullPage.js

Насправді ми не додавали клас active до другого слайда. Ми скористалися стилями класів типу body, які плагін додає до кожної секції і слайда, і просто привласнили елементу стилі класу active. Зверніть увагу: Ми більше не будемо зупинятися на принципі роботи меню, так як це не тема нашого уроку.

Видалення меню секцій

Стан afterLoad відповідає моменту, коли користувач знаходиться в секції, а onLeave це стан, коли користувач покинув її. У нашому проекті ми будемо ховати точки навігації для останньої секції:

Вертикальна і горизонтальна прокрутка на fullPage.js

У секції 4 відображаються у секції 5 вже немає.

Власне код:

afterLoad: function(anchorLink, index) {
if (index == 5) {
$(‘#fp-nav’).hide();
}
}
onLeave: function(index, nextIndex, direction) {
if(index == 5) {
$(‘#fp-nav’).show();
}
}

Видалення меню для слайдів

Стан afterSlideLoad відповідає моменту, коли користувач знаходиться на слайді, а стан onSlideLeave моменту, коли користувач покинув його. У нашому випадку ми сфокусуємося на другому слайді, і випробуємо на ньому кілька різних дій. Приміром, ми будемо відключати прокручування для другого слайда, змінимо властивість background-color і стилі елементів даного слайда.

Вертикальна і горизонтальна прокрутка на fullPage.js

Нижче частина коду:

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
if(anchorLink == ‘fifthSection’ && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(false, ‘up’);
$(this).css(‘background’, ‘#374140’);
$(this).find(‘h2’).css(‘color’, ‘white’);
$(this).find(‘h3’).css(‘color’, ‘white’);
$(this).find (p’).css({
‘color’: ‘#DC3522’,
‘непрозорість’: 1,
‘transform’: ‘translateY(0)’
});
}
}
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
if(anchorLink == ‘fifthSection’ && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(true, ‘up’);
}
}

Чіпляємо плагін

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

$(‘#fullpage’).fullpage({
sectionSelector: ‘.vertical-scrolling’,
slideSelector: ‘.horizontal-scrolling’,
controlArrows: false
// додаткові опції
});

Висновок

У цьому уроці ми швидко пробіглися по jQuery плагіну fullPage.js і дізналися, як створити адаптивний односторінковий сайт. Важливо розуміти, що такий тип сайтів не можна використовувати в будь-якій ситуації. Незважаючи на свій привабливий дизайн, в таких сайтів багато обмежень і їх досить важко обслуговувати, особливо якщо сайт динамічний. Більш того, такий тип сайту може ускладнити SEO.

Подальші кроки

Якщо ви хочете використовувати демо, як майданчик для експериментування з плагіном, я можу підкинути вам завдань:

Підключіть прекрасну бібліотеку animate.css і спробуйте створити анімацію при прокручуванні.

Постарайтеся додати клас active до другого слайда за допомогою JQuery (див. Прописуємо посилання на секції і слайди в меню)