Плагін FullPage — створення односторінкового сайту з скроллом по секціях

20

Від автора: У даному уроці ми з Вами розглянемо дуже цікавий плагін для бібліотеки jQuery – FullPage.js, за допомогою якого можна створити односторінковий сайт з скроллом по секціях.

Плагін FullPage — створення односторінкового сайту з скроллом по секціяхПлагін FullPage — створення односторінкового сайту з скроллом по секціях

Установка плагіна

Отже, для сьогоднішнього уроку ми будемо використовувати наступний тестовий сайт:

Плагін FullPage — створення односторінкового сайту з скроллом по секціях

Складається він з одного файлу index.html і ось його вихідний код:

Тестовий однстраничный сайт

Сторінка 1

Довільний текст

Слайд 1

Для переходу до наступного слайда, натисніть на одну з кнопок у панелі навігації

Слайд 2

Для переходу до наступного слайда, натисніть на одну з кнопок у панелі навігації

Слайд 3

Для переходу до наступного слайда, натисніть на одну з кнопок у панелі навігації

Слайд 4

Для переходу до наступного слайда, натисніть на одну з кнопок у панелі навігації

Плагін FullPage — створення односторінкового сайту з скроллом по секціях

Третя сторінка

Hello

Зверніть увагу, у мене вже підключена бібліотека jQuery, яка необхідна для роботи плагіну FullPage.js. Якщо у Вас дана бібліотека не підключена, обов’язково підключіть її.

Тепер зверніть увагу на структуру html-розмітки. Загальний контейнер div id fullpage — це блок, в якому розташовані секції. Кожна секція – це окремий блок div з класом section. У кожній секції ми можемо розташовувати будь-необхідний контент. Крім вмісту в секціях ми можемо відобразити сладшоу, для цього необхідно в секції створити блок div з класом slide. Знову ж кожен слайд може містити довільний контент.

Тепер перейдемо на офіційний сайт http://alvarotrigo.com/fullPage/ завантажити плагін Fullpage.js:

Плагін FullPage — створення односторінкового сайту з скроллом по секціях

В результаті скачування ми отримуємо архів, далі його необхідно розпакувати і в папці отриманої після розпакування ми знайдемо головний файл бібліотеки jquery.fullPage.js. Його необхідно скопіювати в папку скриптів нашого сайту і підключити. Також з папки vendors Вам може знадобитися плагін jquery.slimscroll.min.js, який використовується для створення вертикальної смуги прокрутки в окремих блоках сайту.

Так само в архіві йде файл стилів, який необхідний для правильної роботи плагіна, його також необхідно підключити:

Після підключення, файлів, виберемо блок div id fullpage, за допомогою бібліотеки jQuery і викличемо метод fullpage():

jQuery(document).ready(function($) {
$(«#fullpage»).fullpage({
sectionsColor:[‘#C63D0F’,’#1BBC9B’,’#7E8F7C’]
});
})

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

Плагін FullPage — створення односторінкового сайту з скроллом по секціях

Як Ви бачите, все успішно працює.

Налаштування плагіна FullPage.js

Тепер давайте поговоримо про налаштуваннях плагіна, для цього додамо ще кілька налаштувань при виклику методу fullpage():

jQuery(document).ready(function($) {
$(«#fullpage»).fullpage({
sectionsColor:[‘#C63D0F’,’#1BBC9B’,’#7E8F7C’],
anchors:[‘firstPage’,’secondPage’,’3rdPage’],
menu:’#menu’,
scrollBar:false,
scrollOverflow:true
navigation:true,
navigationTooltips:[‘Секція 1′,’Секція 2′,’Секція 3′],
slidesNavigation:true,
navigationPosition:’left’,
slidesNavPosition:’top’
loopTop:true,
loopBottom:true,
loopHorizontal:false,
afterResize:function(link,index) {
alert(‘Hello’);
},
afterLoad:function(link,index) {
if(index == 3) {
$(«#section 2 img»).delay(2000).animate({‘left’:’0%’},2000);
}
if(link == ‘3rdPage’) {
$(«#section 2 h1»).fadeIn(1500,function() {
$(«#section 2 p»).css({‘display’:’block’}).animate({‘fontSize’:’8em’},1000)
});
}
}*/
});
})

А також кілька правил CSS, для контенту третього слайда:

#section 2 img {
left:130%;
position:relative;
}
#section 2 p, #section 2 h1{
display:none;
}

Пояснення налаштувань:

anchors – ідентифікатори посилань на секції (у вигляді масиву), що дозволить швидко переміститися до потрібної секції;

menu – ідентифікатор меню – необхідний, що б відзначати посилання відповідні обраної секції;

scrollbar – якщо даній настройці передати значення TRUE, буде показу вертикальна смуга прокрутки браузера;

scrollOverflow – дана настройка необхідна для відображення скрола усередині секції, в тому випадку якщо контент виходить за її межі;

navigation — якщо даній настройці передати значення TRUE, з’явиться навігаційна панель по секціях;

navigationTooltips – масив спливаючих підказок, для кожного елемента навігаційної панелі;

slidesNavigation — якщо даній настройці передати значення TRUE, то в секції слайдів, буде відображена навігація по слайдах;

navigationPosition – позиція навігації по секціях (підтримувані значення left, right);

slidesNavPosition — позиція навігації по слайдах (підтримувані значення bottom і top);

loopTop — якщо даній настройці передати значення TRUE, то переміщення по секціях, буде нескінченним (але тільки в напрямку вгору – до першого слайда). Тобто, якщо на першому слайді обертати колесо миші вперед, то буде виконано перехід до останнього слайда.

loopBottom – аналогічно попередній налаштуванні, тільки напрямок вниз.

loopHorizontal – аналогічно попереднім налаштуванням, тільки працює для слайдів.

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

Так само є ще кілька обробників подій:

onLeave — спрацьовує при переміщенні до наступної секції – в момент переміщення;

afterRender — спрацьовує після ініціалізації скрипта;

afterResize — спрацьовує при зміні розмірів вікна браузера;

afterSlideLoad — спрацьовує при переміщенні від слайда до слайда, і тільки після повної завантаження наступного слайда;

onSlideLeave — спрацьовує при переміщенні до наступного слайда.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!