FullPage — создание одностраничника со поекранным скроллом

Приветствую! В данном уроке мы рассмотрим плагин библиотеки jQuery — FullPage.js, с помощью которого можно создавать одностраничные сайты с скроллингом по секциям.

Пояснение настроек:

anchors – идентификаторы ссылок на секции (в виде массива), что позволит быстро переместиться к нужной секции;

menu – идентификатор меню – необходим, что бы отмечать ссылки соответствующие выбранной секции;

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

scrollOverflow – данная настройка необходима для отображения скрола внутри секции, в том случае если контент выходит за ее границы;

navigation — если данной настройке передать значение TRUE, будет отображена навигационная панель по секциям;

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

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

navigationPosition – позиция навигации по секциям (поддерживаемые значения left и right);

slidesNavPosition — позиция навигации по слайдам (поддерживаемые значения bottom и top);

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

loopBottom – аналогично предыдущей настройке, только направление вниз.

loopHorizontal – аналогично предыдущим настройкам, только работает для слайдов.

 

Так же есть еще несколько обработчиков событий:

onLeave — срабатывает при перемещении к следующей секции – в момент перемещения;

afterRender — срабатывает после инициализации скрипта;

afterResize — срабатывает при изменении размеров окна браузера;

afterSlideLoad — срабатывает при перемещении от слайда к слайду, и только после полной загрузки следующего слайда;

onSlideLeave — срабатывает при перемещении к следующему слайду

 

Итак приступим, данный плагин состоит из одного файла index.html и ниже показан его исходный код:

Будьте внимательны, у меня уже подключена нужная библиотека jQuery, без которой невозможна работа плагина FullPage.js. Если она у вас не подключена — подключите ее.

Теперь рассмотрим разметку нашего файла. У нас присутствует общий контейнер div с идентификатором fullpage — в данном блоке расположены секции, Каждая наша секция является отдельным блоком div с классом section. В данных секциях мы можем размещать любой контент, но помимо размещения контента мы можем размещать слайдшоу, для этого мы в секции создадим блок div с классом slide, и данный слайд тоже может размещать в себе произвольный контент.

Скачать плагин FullPage.js мы можем на официальном сайте ww.alvarotrigo.com/fullPage

После того как мы скачали архив, мы его распаковываем и находим там главный файл библиотеки jquery.fullPage.js. Данный файл берем и копируем к себе в папку со скриптами и подключаем в <head>. Также советую подключить еще один файл jquery.slimscroll.min.js, он вам понадобится для создания вертикальной полосы прокрутки в отдельных блоках сайта.

Плюс в архиве вы найдете еще файл стилей, его тоже нужно подключить для правильной работы плагина.

Далее после подключения фалов выберем наш блок div с идентификатором fullpage, и при помощи jQuery библиотеки вызовем метод fullpage():

Заметьте при вызове метода я использую настройку sectionsColor, она позволит мне задать каждой секции цвет фона.

Настройки плагина FullPage.js:

Вам также может понравиться