Вертикальная и горизонтальная прокрутка на 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). В нашем уроке воспользуемся последним вариантом. Скопируйте ссылку ниже в хедер сайта:

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

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

Первым делом необходимо определить секции нашего сайта. Для этого мы добавим к элементам класс section и обернем этот блок в контейнер с уникальным ID. Позже ID пригодится для получения объекта fullPage. По умолчанию плагин делает активной первую секцию, но это можно изменить, добавив класс active к необходимой секции. Ниже HTML нашего примера:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

Код меню:

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Автор: George Martsoukos

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

  1. Андрей

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree