Плагин FullPage — создание одностраничного сайта со скроллом по секциям

Плагин FullPage - создание одностраничного сайта со скроллом по  секциям

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

скачать исходникискачать урок

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Состоит он из одного файла index.html и вот его исходный код:

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

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

Теперь перейдем на официальный сайт //alvarotrigo.com/fullPage/ и скачаем плагин Fullpage.js:

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

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

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

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

Как Вы видите, все успешно работает.

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

Теперь давайте поговорим о настройках плагина, для этого добавим еще несколько настроек при вызове метода fullpage():

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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 — срабатывает при перемещении к следующему слайду.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (27)