Вертикальная и горизонтальная прокрутка на fullPage.js

Вертикальная и горизонтальная прокрутка на fullPage.js

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

Взглянуть на демо можно по ссылке Codepen. А в дополнении ко всему файлы демо можно найти в репозитории на Github.

Что из себя представляет fullPage.js?

fullPage.js это JQuery плагин, который предназначен для создания одностраничных сайтов с прокруткой. Написан плагин веб-разработчиком Alvaro Trigo, включает в себя огромный набор по настройке. Также с плагином поставляется очень удобная документация с рабочими примерами.

К еще большему счастью плагин работает не только в современных браузерах, но и в таких, как IE8 и Opera 12. И, в конце концов, я думаю, вы захотите взглянуть на WordPress версию.

Приступаем к работе с fullPage.js

Перед тем, как начать, загрузите и установите следующие файлы: Библиотека JQuery (≥1.6.0), jquery.fullPage.css, jquery.fullPage.js или его минифицированную версию jquery.fullPage.min.js

Найти их можно по ссылке на Github и загрузить с помощью специального менеджера (Bower) или с помощью CDN (cdnjs). В нашем уроке воспользуемся последним вариантом. Скопируйте ссылку ниже в хедер сайта:

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet">

…и скрипты перед закрывающим тегом body:

<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>

Создаем секции Fullpage

Первым делом необходимо определить секции нашего сайта. Для этого мы добавим к элементам класс section и обернем этот блок в контейнер с уникальным ID. Позже ID пригодится для получения объекта fullPage. По умолчанию плагин делает активной первую секцию, но это можно изменить, добавив класс active к необходимой секции. Ниже 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>

Обратите внимание, что всем секциям присвоен класс vertical-scrolling, это сделано для того, чтобы различать секции между собой. В нашем случае мы должны сообщить плагину об изменениях в процессе инициализации.

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

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

<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>

Еще раз, как видно, мы добавляем наш класс horizontal-scrolling к слайдам.

Настраиваем внешний вид сайта

Настроить внешний вид секций и слайдов можно с помощью встроенных возможностей нашего плагина. Один из таких параметров это свойство sectionColor, с его помощью можно легко установить CSS свойство background-color для всех секций.

Более того, мы можем задавать свои собственные стили. К примеру, представьте, что мы хотим установить в качестве фона рисунок ко второй секции. Ниже показано, как это можно сделать:

section:nth-of-type(2) {
    background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;
}

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

В плагине довольно много встроенных опций по перемещению между слайдами. Некоторые из них по умолчанию активированы (к примеру, прокрутка колесом и клавишами), другие работают при нажатии на объект конфигурации (к примеру, точки).

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

#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;
}

А еще ниже скриншот, в котором показаны изменения, которые мы совершили:

Стили по умолчанию и наши стили

Обратите внимание на то, что мы включили наши стили в отдельный файл, чтобы не изменять CSS файл плагина.

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

fullPage.js позволяет изменить ссылки на нашем сайте, чтобы мы могли перемещаться между различными секциями. Для этого используется параметр anchor – это массив, содержащий якоря, которые нужно отображать в ссылке к каждой секции. К примеру, в нашем примере будут такие якоря (они должны быть уникальны):

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

При нахождении в первой секции в конце нашего URL’а будет #firstSection, во второй секции будет #secondSection и т.д.

Таким же образом плагин модифицирует URL’ы во время прокрутки слайдов. А теперь пора вспомнить про то, что наш первый слайд (с индексом 0) также является и секцией. Нельзя это забывать, когда мы будем на первом слайде пятой секции, наш URL будет заканчиваться на #fifthSection.

При прокрутке на второй слайд в той же секции ссылка изменится на #fifthSection/1, так как второй слайд (с индексом 1) по сути как «первый» слайд. Стоит сказать, что мы можем изменить якоря, добавив атрибут data-anchor с нужным нам именем (которое тоже должно быть уникальным), как в примере ниже:

<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- контент --></div>

Обратите внимание: если вы хотите посмотреть, как меняются ссылки, посмотрите демо Debug View.

Прописываем ссылки на секции и слайды в меню

Чтобы лучше понять, как добавить меню в fullPage, взглянем на нашу фиксированную шапку. Скриншот ниже показывает, как она выглядит:

<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>

При нажатии на иконку гамбургера сверху всплывает меню:

Код меню:

<nav class="hide">
    <ul id="menu">
        <li data-menuanchor="firstSection">
            <a href="#firstSection" title="First Section">Первая секция</a>
        </li>
        <li data-menuanchor="secondSection">
            <a href="#secondSection" title="Second Section">Вторая секция</a>
        </li>
        <!—остальные секции ниже -->
    </ul>
</nav>

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

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

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

Результат показан ниже:

На самом деле мы не добавляли класс active ко второму слайду. Мы воспользовались стилями классов типа body, которые плагин добавляет к каждой секции и слайду, и просто присвоили элементу стили класса active. Обратите внимание: Мы больше не будем останавливаться на принципе работы меню, так как это не тема нашего урока.

Удаление меню секций

Состояние afterLoad соответствует моменту, когда пользователь находится в секции, а onLeave это состояние, когда пользователь покинул ее. В нашем проекте мы будем прятать точки навигации для последней секции:

В секции 4 отображаются, в секции 5 уже нет.

Собственно код:

afterLoad: function(anchorLink, index) {
    if (index == 5) {
        $('#fp-nav').hide();
    }
}
 
onLeave: function(index, nextIndex, direction) {
    if(index == 5) {
        $('#fp-nav').show();
    }
}

Удаление меню для слайдов

Состояние afterSlideLoad соответствует моменту, когда пользователь находится на слайде, а состояние onSlideLeave моменту, когда пользователь покинул его. В нашем случае мы сфокусируемся на втором слайде, и опробуем на нем несколько различных действий. К примеру, мы будем отключать прокрутку для второго слайда, изменим свойство background-color и стили элементов данного слайда.

Ниже часть кода:

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(false, 'up');
        $(this).css('background', '#374140');
        $(this).find('h2').css('color', 'white');
        $(this).find('h3').css('color', 'white');
        $(this).find('p').css({
            'color': '#DC3522',
            'opacity': 1,
            'transform': 'translateY(0)'
        });
    }
}
     
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
        $.fn.fullpage.setAllowScrolling(true, 'up');
    }
}

Цепляем плагин

Остался последний шаг для того, чтобы заработал наш плагин. Осталось получить объект и присвоить ему необходимые настройки. Ниже фрагмент кода:

$('#fullpage').fullpage({
    sectionSelector: '.vertical-scrolling',
    slideSelector: '.horizontal-scrolling',
    controlArrows: false
    // дополнительные опции
});

Заключение

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

Дальнейшие шаги

Если вы хотите использовать демо, как площадку для экспериментирования с плагином, я могу подкинуть вам задач:

Подключите прекрасную библиотеку animate.css и попробуйте создать анимацию при прокрутке.

Постарайтесь добавить класс active ко второму слайду с помощью JQuery (см. Прописываем ссылки на секции и слайды в меню)

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

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

  1. Андрей

    В чем может быть усложнено SEO?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree