От автора: В данном уроке мы с Вами рассмотрим очень интересный плагин для библиотеки jQuery – FullPage.js, при помощи которого можно создать одностраничный сайт со скроллом по секциям.
Установка плагина
Итак, для сегодняшнего урока мы будем использовать следующий тестовый сайт:
Состоит он из одного файла index.html и вот его исходный код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html xmlns="//www.w3.org/1999/xhtml"> <meta charset='utf-8'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Тестовый однстраничный сайт</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> </head> <body> <ul id="menu"> <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li> <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li> </ul> <div id="fullpage"> <div class="section" id="section0"> <div class="intro"> <h1>Страница 1</h1> <p>Произвольный текст</p> </div> </div> <div class="section" id="section1"> <div class="slide" id="slide1"> <div class="intro"> <h1>Слайд 1</h1> <p> Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации </p> </div> </div> <div class="slide" id="slide2"> <h1>Слайд 2</h1> <p> Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации </p> </div> <div class="slide" id="slide2"> <h1>Слайд 3</h1> <p> Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации </p> </div> <div class="slide" id="slide2"> <h1>Слайд 4</h1> <p> Для перехода к следующему слайду, нажмите по одной из кнопок панели навигации </p> </div> </div> <div class="section" id="section2"> <div class="intro"> <img src="img/used-by-fullpage.PNG" /> <h1>Третья страница</h1> <p>Hello</p> </div> </div> </div> </body> </html> |
Обратите внимание, у меня уже подключена библиотека jQuery, которая необходима для работы плагина FullPage.js. Если у Вас данная библиотека не подключена, обязательно подключите ее.
Теперь обратите внимание на структуру html разметки. Общий контейнер div с идентификатором fullpage — это блок, в котором расположены секции. Каждая секция – это отдельный блок div с классом section. В каждой секции мы можем располагать любой необходимый нам контент. Помимо контента в секциях мы можем отобразить сладшоу, для этого необходимо в секции создать блок div с классом slide. Опять же каждый слайд может содержать произвольный контент.
Теперь перейдем на официальный сайт //alvarotrigo.com/fullPage/ и скачаем плагин Fullpage.js:
В результате скачивания мы получаем архив, далее его необходимо распаковать и в папке полученной после распаковки мы найдем главный файл библиотеки jquery.fullPage.js. Его необходимо скопировать в папку скриптов нашего сайта и подключить. Также из папки vendors Вам может понадобиться плагин jquery.slimscroll.min.js, который используется для создания вертикальной полосы прокрутки в отдельных блоках сайта.
|
1 2 |
<script type="text/javascript" src="js/jquery.fullPage.js"></script> <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script> |
Так же в архиве идет файл стилей, который необходим для правильной работы плагина, его также необходимо подключить:
|
1 |
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> |
После подключения, файлов, выберем блок div с идентификатором fullpage, при помощи библиотеки jQuery и вызовем метод fullpage():
|
1 2 3 4 5 |
jQuery(document).ready(function($) { $("#fullpage").fullpage({ sectionsColor:['#C63D0F','#1BBC9B','#7E8F7C'] }); }) |
Обратите внимание, что при вызове метода я использую настройку sectionsColor, которая позволяет задать цвет фона для каждой секции в отдельности. Теперь давайте перейдем в браузер и посмотрим, что изменилось:
Как Вы видите, все успешно работает.
Настройки плагина FullPage.js
Теперь давайте поговорим о настройках плагина, для этого добавим еще несколько настроек при вызове метода fullpage():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
jQuery(document).ready(function($) { $("#fullpage").fullpage({ sectionsColor:['#C63D0F','#1BBC9B','#7E8F7C'], anchors:['firstPage','secondPage','3rdPage'], menu:'#menu', scrollBar:false, scrollOverflow:true navigation:true, navigationTooltips:['Секция 1','Секция 2','Секция 3'], slidesNavigation:true, navigationPosition:'left', slidesNavPosition:'top' loopTop:true, loopBottom:true, loopHorizontal:false, afterResize:function(link,index) { alert('Hello'); }, afterLoad:function(link,index) { if(index == 3) { $("#section2 img").delay(2000).animate({'left':'0%'},2000); } if(link == '3rdPage') { $("#section2 h1").fadeIn(1500,function() { $("#section2 p").css({'display':'block'}).animate({'fontSize':'8em'},1000) }); } }*/ }); }) |
А также несколько правил CSS, для контента третьего слайда:
|
1 2 3 4 5 6 7 |
#section2 img { left:130%; position:relative; } #section2 p, #section2 h1{ display:none; } |
Пояснение настроек:
anchors – идентификаторы ссылок на секции (в виде массива), что позволит быстро переместиться к нужной секции;
menu – идентификатор меню – необходим, что бы отмечать ссылки соответствующие выбранной секции;
scrollbar – если данной настройке передать значение TRUE, будет показа вертикальная полоса прокрутки браузера;
scrollOverflow – данная настройка необходима для отображения скрола внутри секции, в том случае если контент выходит за ее границы;
navigation — если данной настройке передать значение TRUE, будет отображена навигационная панель по секциям;
navigationTooltips – массив всплывающих подсказок, для каждого элемента навигационной панели;
slidesNavigation — если данной настройке передать значение TRUE, то в секции слайдов, будет отображена навигация по слайдам;
navigationPosition – позиция навигации по секциям (поддерживаемые значения left и right);
slidesNavPosition — позиция навигации по слайдам (поддерживаемые значения bottom и top);
loopTop — если данной настройке передать значение TRUE, то перемещение по секциям, будет бесконечным (но только в направлении вверх – к первому слайду). То есть, если на первом слайде вращать колесо мыши вперед, то будет выполнено перемещение к последнему слайду.
loopBottom – аналогично предыдущей настройке, только направление вниз.
loopHorizontal – аналогично предыдущим настройкам, только работает для слайдов.
Теперь обратите внимание на настройку afterLoad – это обработчик события, и он срабатывает после загрузки секции. То есть, перемещаясь от секции к секции, данное событие будет выполняться после отображения каждой секции. Данный обработчик позволяет описать функцию, которая будет выполняться после загрузки каждой секции. Функция принимает в качестве параметров, два значения: первый – это идентификатор привязанной ссылки к текущей секции, второй – это индекс секции – ее номер, индексация секций начинается с 1. используя данное событие можно выполнять различные анимационные эффекты при переходе к определенным секциям (посмотрите как сейчас отображается третья секция).
Так же есть еще несколько обработчиков событий:
onLeave — срабатывает при перемещении к следующей секции – в момент перемещения;
afterRender — срабатывает после инициализации скрипта;
afterResize — срабатывает при изменении размеров окна браузера;
afterSlideLoad — срабатывает при перемещении от слайда к слайду, и только после полной загрузки следующего слайда;
onSlideLeave — срабатывает при перемещении к следующему слайду.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (27)