Блог о веб-разработке > Animation > Вертикальный и горизонтальный скроллинг с fullPage.js

Вертикальный и горизонтальный скроллинг с fullPage.js

В статье мы рассмотрим, как создать полноэкранный вертикальный и горизонтальный скроллинг используя плагин fullPage.js.
Демо:

See the Pen Fullpage.js demo by Alexey (@CreativeSeo33) on CodePen.

jQuery плагин fullPage.js

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 подключим перед закрывающим тегом :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

Теперь мы готовы использовать плагин!

Создадим полноэкранные секции

Сначала выделим секции, обернув их в тег section. Позже каждой секции будет присвоен уникальный id. По умолчанию, плагин считаем активной первую секцию. Чтобы сделать активной другую секцию, добавьте к ней класс action.
Пример HTML структуры:

<div id="fullPage">
    <section class="vertical-scrolling">
        <h2>fullPage.js</h2>
        <h3>Первая секция</h3>
        <div class="scroll-icon">
            <p>Перейти к последнему слайду</p>
            <a href="#fifthSection/1" class="icon-up-open-big"></a
        </div>
    </section>
    <section class="vertical-scrolling">
        <!-- контент здесь -->
    </section>
    <section class="vertical-scrolling">
        <!-- контент здесь -->
    </section>
    <section class="vertical-scrolling">
        <!-- контент здесь -->
    </section>  
    <section class="vertical-scrolling">
        <!-- контент здесь -->
    </section> 
</div>

<h2>fullPage.js</h2>

<h3>Первая секция</h3>

<p>Перейти к последнему слайду</p>

<a href="#fifthSection/1" class="icon-up-open-big"></a

</div>

</section>

</section>

</section>

</section>

</section>

</div>

Создадим горизонтальные слайды

Вертикально расположенные секции можно скроллить горизонтально. Применим для секций класс horizontal-scrolling.

<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> 
        <p class="end">Спасибо!</p>
    </div>
</section>

<h2>fullPage.js</h2>

<h3>Это пятый раздел и содержит первый слайд</h3>

</div>

<h2>fullPage.js</h2>

<h3>Это второй слайд</h3>

<p class="end">Спасибо!</p>

</div>

</section>

Настроим навигацию

Плагин предлагает множество встроенных опций для перемещения по разделам и слайдам. Некоторые из этих опций изначально включены. Мы хотим добавить в наш проект дополнительную навигацию в виде точек. Кроме того, мы скроем правую и левые стрелки, которые обычно появляются на слайде. После включения точек навигации, мы можем изменить их внешний вид путем перезаписи стилей по умолчанию. Вот новые стили:

#fp-nav ul li a span, 
.fp-slidesNav ul li a span {
    background: white;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -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: -8px 0 0 -8px;
    background: transparent;
    box-sizing: border-box;
    border: 1px solid #24221F;
}

#fp-nav ul li a span,

.fp-slidesNav ul li a span {

background: white;

width: 8px;

height: 8px;

margin: -4px 0 0 -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: -8px 0 0 -8px;

background: transparent;

box-sizing: border-box;

border: 1px solid #24221F;

}

Ниже вы можете увидеть изменения:

Создадим ссылки для секций и слайдов

Зададим якорные ссылки для каждого раздела с помощью параметра anchors. Это массив который содержит ссылки:

anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

1	anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

В конце URL нашего сайта будет прибавляться id секции.
Мы можем задать якорь для секции с помощью data-anchor:

<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- more content here --></div>

1	<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- more content here --></div>

Добавим в наш проект меню.

<div class="header-top clearfix">
    <h1 class="l-left">
        <a href="#firstSection">Your Logo</a>
    </h1>
    <a class="l-right toggle-menu" href="#">
        <i></i>
        <i></i>
        <i></i>
    </a>
</div>

</h1>

<i></i>

</a>

</div>

Код меню:

<nav class="hide">
    <ul id="menu">
        <li data-menuanchor="firstSection">
            <a href="#firstSection" title="First Section">First Section</a>
        </li>
        <li data-menuanchor="secondSection">
            <a href="#secondSection" title="Second Section">Second Section</a>
        </li>
        <!-- more list items here -->
    </ul>
</nav>

<a href="#firstSection" title="First Section">First Section</a>

</li>

<a href="#secondSection" title="Second Section">Second Section</a>

</li>

</ul>

</nav>

Чтобы плагин fullPage начал работать с меню, его надо зарегистрировать с помощью параметра menu. Далее необходимо пункты меню связать с секциями, добавив атрибут data-menuanchor . Когда секция активна, соответствующему пункту меню добавляется класс active .

Обратите внимание, что плагин еще не добавил класс active к слайдам. Чтобы исправить это, мы можем использовать либо JQuery (лучшее решение), либо CSS. В нашем примере, мы решим эту проблему, добавив CSS:

body.fp-viewing-fifthSection-1 #menu li:last-child a {
    background: #453659;
}

body.fp-viewing-fifthSection-1 #menu li:last-child a {

background: #453659;

}

Результат:

Инициализация плагина

Это последний шаг, в котором мы должны задать опции плагина:

$('#fullpage').fullpage({
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    controlArrows: false
    // другие опции
});

$('#fullpage').fullpage({

sectionSelector: '.vertical-scrolling',

slideSelector: '.horizontal-scrolling',

controlArrows: false

// другие опции

});

Заключение

В этой статье мы рассмотрели подключение и настройку плагина fullPage.js. Важно понимать, что данный тип скроллинга подойдет не для всех сайтов. Кроме того, могут быть осложнения по SEO. Поделитесь своими мыслями в комментариях!