fullPage.js – навігація до наступного блоку при скроллі коліщатком мишки

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

Сам скрипт можна скачати з офіційної сторінки автора:

>> Сторінка автора (+Демо) <<

Завантажуємо і розпаковуємо архів зі скриптом. Стандартне підключення. Нам знадобитися два файли з архіву:

Файл стилів скрипта: jquery.fullPage.css

Власне сам скрипт: jquery.fullPage.js

Підключення:

завантажуємо файли на сервер і підключаємо:

(будьте уважні з провідними шляхами до файлів, у Вас вони скоріше всього будуть відрізнятися, в прикладі файли лежать в папках css і js, відповідно, від кореня сайту)

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

Для вертикальної навігації по блокам/розділів з допомогою скролла:

Для горизонтальної навігації (повно розмірний слайдер всередині одного з блоків):

Тепер, щоб наша конструкція запрацювала, ініціалізуємо роботу скрипта:

Може комусь уточнення здасться і смішним, але для новачків зроблю уточнення: ця конструкція додається до контент сторінки (бажано перед закривається тегом /body). Якщо вставити в будь-якій вже підключений файл .js то теги <script> </sctipt> прибираємо. І для підключення в WordPress:

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

На виході отримуємо майже готовий LandingPage – з оригінальною навігацією по розділам та симпатичними “фенічками” без особливих зусиль, в чому і допомогла Вам, сподіваюся, дана інструкція.

 

Невелике зауваження сумісності fullPage.js і wow.js (скрипт популярний, так що ньюанс варто зазначити). C дефолтними налаштуваннями анімація не працює. Для спрацьовування анімації потрібно використовувати параметр scrollBar:true. Якщо скроллбар не потрібен, додаємо ccs

 

 

 

 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *