Від автора: у наші дні все більше сайтів вибирають односторінковий дизайн (або односторінкові сайти). У цій статті ми покажемо, як створити такий сайт і скористаємося для цього всіма перевагами 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 до необхідного елементу в секції. Крім усього іншого, важливо звернути увагу на те, що чисто технічно перший слайд є також і першою секцією. Нижче ми розглянемо це детальніше! Повернемося до нашого прикладу, нижче код показує, як створити два слайди в секції:

Ще раз, як видно, ми додаємо наш клас 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

Код меню:

• Перша секція
• Друга секція

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

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

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

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

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

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

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

У секції 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 і стилі елементів даного слайда.

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

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.

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

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