Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. fullPage.js

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

by
Length:MediumLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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

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

Что такое fullPage.js?

fullPage.js – это плагин, основанный на jQuery, который позволяет нам создавать одностраничные сайты со скроллингом секций. Созданный разработчиком Альваро Триго, как мы увидим в ближайшем времени, он обладает неплохим набором кастомизации.

Плюс ко всему, плагин имеет хорошо структурированную документацию со множеством примеров.

К счастью, он работает не только в современных браузерах, но и в IE 8 и Opera 12.

Наконец, вам может пригодиться его версия для Wordpress.

Начинаем работу с fullPage.js

Чтобы начать работу с fullPage, вам нужно скачать и установить в ваш проект следующие файлы.

  • Библиотеку jQuery (≥1.6.0)
  • CSS файл jquery.fullPage.css
  • Полную (jquery.fullPage.js) или минифицированную (jquery.fullPage.min.js) версию JS файла

Вы можете найти эти файлы в репозитории на Github, используя менеджер пакетов (Bower, к примеру), или загрузив нужные файлы через CDN (например, cdnjs). Для нашего урока мы выберем последний вариант.

Поместите ссылку на CSS файл в <head> элемент вашего HTML документа:

...и скрипт JS перед закрывающим тегом <body>:

Теперь мы можем начать работу!

Создаем секции на всю страницу

Сперва мы должны обозначить секции нашего сайта. Для этого мы разместим элемент section, добавим ему класс и вложим эти элементы в контейнер, который будет иметь уникальный id. Потом мы будем использовать этот id для того, чтобы  наш fullPage заработал.

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

Вот необходимая для нашего примера HTML разметка:

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

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

Каждая из этих вертикальных секций может быть дополнена горизонтальными слайдами. Чтобы обозначить эти слайды, мы применяем класс slides нужным элементам и вкладываем их в нужную нам секцию.

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

Возвращаясь к нашему примеру, код ниже показывает, каким образом мы расположили два слайда в пятой секции.

Вы снова можете заметить, что мы дали нашим слайдам отдельные классы (horizontal-scrolling).

Меняем внешний вид

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

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

Меняем настройки навигации

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

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

Вот скриншот, который показывает те изменения, что мы сделали:

default vs custom styles
Стандартный (слева) и кастомизированный (справа)

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

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

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

Сделано! Когда мы посещаем первую секцию, URL нашего сайта будет иметь идентификатор #firstSection на конце,  а когда вторую – #secondSection, и т.д.

Таким же образом можно изменять URL страницы, когда мы переходим между слайдами. Здесь нам стоит вспомнить, что первый слайд (который обозначается как 0) является также и первой секцией. Не забывая про это, в нашем случае, когда мы находимся на первом слайде пятой секции, URL будет оканчиваться на #fifthSection. Когда мы перейдем на второй слайд этой же секции, конец нашего URL изменится на #fifthSection/1, т.к. второй слайд (который обозначается как 1) на деле является нашим “первым” слайдом.

Стоит упомянуть, что мы можем изменять якоря-ссылки для наших слайдов, добавляя им параметр data-anchor с теми названиями ссылок, которые нам нужны (каждое из них должно быть уникальным). Как в этом примере:

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

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

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

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

Его HTML:

Когда срабатывает иконка-гамбургер меню, само меню появляется:

Вот код, относящийся к этому меню:

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

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

Результат:

На самом деле мы не добавляем класс active нашему второму слайду. Пользуясь тем, что плагин добавляет разные классы к секциям и слайдам внутри body, мы всего лишь вручную добавляем нашим объектам стили класса active.

Примечание: далее мы больше не будем рассматривать, как работает меню, т.к. это вне изначальных целей нашего урока.

Используем callback-функции в секциях

Обратная (callback) функция afterLoad запускается, когда секция загрузилась и onLeave, когда пользователь ее покинул.

В нашем проекте мы хотим спрятать навигацию по вертикальным точкам, когда мы оказываемся на пятой секции.

4 секция, а затем 5, но без точек

Вот как мы это сделаем:

Используем callback-функции в слайдах

Обратная функция afterSlideLoad запускается, когда слайд загрузился, а onSlideLeave – когда пользователь покидает слайд.

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

Код, который мы для этого использовали, представлен ниже:

Запуск плагина

Остался последний шаг, чтобы все заработало. Мы передаем все изменения, которые мы сделали, настройкам плагина. Взгляните на код:

Заключение

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

Что дальше?

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

  • Внедрите превосходную библиотеку animate.css в проект и попробуйте создать анимации элементов при скроллинге секций или слайдов.
  • Используйте ваши знания jQuery, чтобы добавить класс active второму слайду (ищите в разделе Привязываем ссылки меню к секциям и слайдам).

И, наконец, если вы уже имели опыт с одностраничными сайтами, поделитесь вашими мыслями в комментариях!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.