fullPage.js это jquery плагин, который позволяет создать постраничный скроллинг. Для плагина написана хорошая документация с большим количеством примеров. Также существует версия плагина для WordPress.
Начало работы с fullPage.js
Перед началом работы, у вас должны быть загружены следующие библиотеки:
jQuery (≥1.6.0)
файл jquery.fullPage.css
файл jquery.fullPage.js
Вы можете скачать файлы fullPage.js с репозитория на Gthub или подключит их как CDN. В данном примере воспользуемся CDN. Ссылку на CSS файл разместим в теге <head>: <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css"rel="stylesheet"> Файлы javascript подключим перед закрывающим тегом
Сначала выделим секции, обернув их в тег section. Позже каждой секции будет присвоен уникальный id. По умолчанию, плагин считаем активной первую секцию. Чтобы сделать активной другую секцию, добавьте к ней класс action. Пример HTML структуры:
Вертикально расположенные секции можно скроллить горизонтально. Применим для секций класс horizontal-scrolling.
1
2
3
4
5
6
7
8
9
10
11
<section class="vertical-scrolling">
<div class="horizontal-scrolling">
<h2>fullPage.js</h2>
<h3>Этопятыйразделисодержитпервыйслайд</h3>
</div>
<div class="horizontal-scrolling">
<h2>fullPage.js</h2>
<h3>Этовторойслайд</h3>
<pclass="end">Спасибо!</p>
</div>
</section>
Настроим навигацию
Плагин предлагает множество встроенных опций для перемещения по разделам и слайдам. Некоторые из этих опций изначально включены. Мы хотим добавить в наш проект дополнительную навигацию в виде точек. Кроме того, мы скроем правую и левые стрелки, которые обычно появляются на слайде. После включения точек навигации, мы можем изменить их внешний вид путем перезаписи стилей по умолчанию. Вот новые стили:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background:white;
width:8px;
height:8px;
margin:-4px00-4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width:16px;
height:16px;
margin:-8px00-8px;
background:transparent;
box-sizing:border-box;
border:1pxsolid#24221F;
}
Ниже вы можете увидеть изменения:
Создадим ссылки для секций и слайдов
Зададим якорные ссылки для каждого раздела с помощью параметра anchors. Это массив который содержит ссылки:
Чтобы плагин fullPage начал работать с меню, его надо зарегистрировать с помощью параметра menu. Далее необходимо пункты меню связать с секциями, добавив атрибут data-menuanchor . Когда секция активна, соответствующему пункту меню добавляется класс active . Обратите внимание, что плагин еще не добавил класс active к слайдам. Чтобы исправить это, мы можем использовать либо JQuery (лучшее решение), либо CSS. В нашем примере, мы решим эту проблему, добавив CSS:
1
2
3
body.fp-viewing-fifthSection-1 #menu li:last-child a {
background:#453659;
}
Результат:
Инициализация плагина
Это последний шаг, в котором мы должны задать опции плагина:
1
2
3
4
5
6
$('#fullpage').fullpage({
sectionSelector:'.vertical-scrolling',
slideSelector:'.horizontal-scrolling',
controlArrows:false
// другие опции
});
Заключение
В этой статье мы рассмотрели подключение и настройку плагина fullPage.js. Важно понимать, что данный тип скроллинга подойдет не для всех сайтов. Кроме того, могут быть осложнения по SEO. Поделитесь своими мыслями в комментариях!