
Приветствую! В данном уроке мы рассмотрим плагин библиотеки 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:
|