От автора: в наши дни все больше сайтов выбирают одностраничный дизайн (или одностраничные сайты). В этой статье мы покажем, как создать такой сайт и воспользуемся для этого всеми преимуществами 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). В нашем уроке воспользуемся последним вариантом. Скопируйте ссылку ниже в хедер сайта:
1 |
<link href="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet"> |
…и скрипты перед закрывающим тегом body:
1 2 |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> |
Создаем секции Fullpage
Первым делом необходимо определить секции нашего сайта. Для этого мы добавим к элементам класс section и обернем этот блок в контейнер с уникальным ID. Позже ID пригодится для получения объекта fullPage. По умолчанию плагин делает активной первую секцию, но это можно изменить, добавив класс active к необходимой секции. Ниже HTML нашего примера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 к требуемому элементу в секции. Кроме всего прочего, важно обратить внимание на то, что чисто технически первый слайд является также и первой секцией. Ниже мы рассмотрим это подробнее! Вернемся к нашему примеру, код ниже показывает, как создать два слайда в секции:
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> <p class="end">Спасибо, все пролистано!</p> </div> </section> |
Еще раз, как видно, мы добавляем наш класс horizontal-scrolling к слайдам.
Настраиваем внешний вид сайта
Настроить внешний вид секций и слайдов можно с помощью встроенных возможностей нашего плагина. Один из таких параметров это свойство sectionColor, с его помощью можно легко установить CSS свойство background-color для всех секций.
Более того, мы можем задавать свои собственные стили. К примеру, представьте, что мы хотим установить в качестве фона рисунок ко второй секции. Ниже показано, как это можно сделать:
1 2 3 |
section:nth-of-type(2) { background: url('//unsplash.it/1910/1221?image=626') no-repeat center / cover; } |
Настраиваем навигацию
В плагине довольно много встроенных опций по перемещению между слайдами. Некоторые из них по умолчанию активированы (к примеру, прокрутка колесом и клавишами), другие работают при нажатии на объект конфигурации (к примеру, точки).
В нашем примере мы добавим навигацию в форме точек. Также мы скроем стрелки слева и справа, которые по умолчанию видны. Как только наши точки заработали, настроить их внешний вид можно, изменив стили по умолчанию. Ниже пара новых правил CSS:
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: -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 – это массив, содержащий якоря, которые нужно отображать в ссылке к каждой секции. К примеру, в нашем примере будут такие якоря (они должны быть уникальны):
1 |
anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'] |
При нахождении в первой секции в конце нашего URL’а будет #firstSection, во второй секции будет #secondSection и т.д.
Таким же образом плагин модифицирует URL’ы во время прокрутки слайдов. А теперь пора вспомнить про то, что наш первый слайд (с индексом 0) также является и секцией. Нельзя это забывать, когда мы будем на первом слайде пятой секции, наш URL будет заканчиваться на #fifthSection.
При прокрутке на второй слайд в той же секции ссылка изменится на #fifthSection/1, так как второй слайд (с индексом 1) по сути как «первый» слайд. Стоит сказать, что мы можем изменить якоря, добавив атрибут data-anchor с нужным нам именем (которое тоже должно быть уникальным), как в примере ниже:
1 |
<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- контент --></div> |
Обратите внимание: если вы хотите посмотреть, как меняются ссылки, посмотрите демо Debug View.
Прописываем ссылки на секции и слайды в меню
Чтобы лучше понять, как добавить меню в fullPage, взглянем на нашу фиксированную шапку. Скриншот ниже показывает, как она выглядит:
1 2 3 4 5 6 7 8 9 10 |
<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> |
При нажатии на иконку гамбургера сверху всплывает меню:
Код меню:
1 2 3 4 5 6 7 8 9 10 11 |
<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:
1 2 3 |
body.fp-viewing-fifthSection-1 #menu li:last-child a { background: #453659; } |
Результат показан ниже:
На самом деле мы не добавляли класс active ко второму слайду. Мы воспользовались стилями классов типа body, которые плагин добавляет к каждой секции и слайду, и просто присвоили элементу стили класса active. Обратите внимание: Мы больше не будем останавливаться на принципе работы меню, так как это не тема нашего урока.
Удаление меню секций
Состояние afterLoad соответствует моменту, когда пользователь находится в секции, а onLeave это состояние, когда пользователь покинул ее. В нашем проекте мы будем прятать точки навигации для последней секции:
В секции 4 отображаются, в секции 5 уже нет.
Собственно код:
1 2 3 4 5 6 7 8 9 10 11 |
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 и стили элементов данного слайда.
Ниже часть кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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'); } } |
Цепляем плагин
Остался последний шаг для того, чтобы заработал наш плагин. Осталось получить объект и присвоить ему необходимые настройки. Ниже фрагмент кода:
1 2 3 4 5 6 |
$('#fullpage').fullpage({ sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // дополнительные опции }); |
Заключение
В этом уроке мы быстро пробежались по jQuery плагину fullPage.js и узнали, как создать адаптивный одностраничный сайт. Важно понимать, что такой тип сайтов нельзя использовать в любой ситуации. Несмотря на свой привлекательный дизайн, у таких сайтов много ограничений и их довольно трудно обслуживать, особенно если сайт динамический. Более того, такой тип сайта может усложнить SEO.
Дальнейшие шаги
Если вы хотите использовать демо, как площадку для экспериментирования с плагином, я могу подкинуть вам задач:
Подключите прекрасную библиотеку animate.css и попробуйте создать анимацию при прокрутке.
Постарайтесь добавить класс active ко второму слайду с помощью JQuery (см. Прописываем ссылки на секции и слайды в меню)
Автор: George Martsoukos
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (2)