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

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

Сам скрипт можно скачать на официальной странице автора:

>> Страница автора (+Демо) <<

Скачиваем и распаковываем архив со скриптом. Подключение стандартное. Нам понадобиться два файла из архива:

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

Собственно сам скрипт: jquery.fullPage.js

Подключение:

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

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

Теперь для реализации вертикальной навигации по блокам нам нужно создать соответствующую разметку страницы, с которой будет работать наш скрипт. Тут все выглядит также просто и понятно. Собственно сама разметка:

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

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

Частый случай, когда нужно среди полно экранных блоков добавить блок произвольной высоты в fullpage.js. Для этого в разметке секций добавляем класс fp-auto-height или fp-auto-height-responsive

Теперь, чтобы наша конструкция заработала, инициализируем работу скрипта:

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

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

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

Решение частных проблем при использовании fullPage.js (совместимость)

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

Проблема с автоматическим воспроизведением HTML5 видео при использоавнии fullPage.js. Для решения данной проблемы нужно добавить в скрипт инициализации:

При этом тег <video> должен иметь ID “video” (<video …. loop autoplay muted id=”video”>)

 

 

 

One Comment

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *