Приветствую! В данном уроке мы рассмотрим плагин библиотеки jQuery — FullPage.js, с помощью которого можно создавать одностраничные сайты с скроллингом по секциям.
Пояснение настроек:
anchors – идентификаторы ссылок на секции (в виде массива), что позволит быстро переместиться к нужной секции;
menu – идентификатор меню – необходим, что бы отмечать ссылки соответствующие выбранной секции;
scrollbar – если данной настройке передать значение TRUE, будет показа вертикальная полоса прокрутки браузера;
scrollOverflow – данная настройка необходима для отображения скрола внутри секции, в том случае если контент выходит за ее границы;
navigation — если данной настройке передать значение TRUE, будет отображена навигационная панель по секциям;
navigationTooltips – массив всплывающих подсказок, для каждого элемента навигационной панели;
slidesNavigation — если данной настройке передать значение TRUE, то в секции слайдов, будет отображена навигация по слайдам;
navigationPosition – позиция навигации по секциям (поддерживаемые значения left и right);
slidesNavPosition — позиция навигации по слайдам (поддерживаемые значения bottom и top);
loopTop — если данной настройке передать значение TRUE, то перемещение по секциям, будет бесконечным (но только в направлении вверх – к первому слайду). То есть, если на первом слайде вращать колесо мыши вперед, то будет выполнено перемещение к последнему слайду.
loopBottom – аналогично предыдущей настройке, только направление вниз.
loopHorizontal – аналогично предыдущим настройкам, только работает для слайдов.
Так же есть еще несколько обработчиков событий:
onLeave — срабатывает при перемещении к следующей секции – в момент перемещения;
afterRender — срабатывает после инициализации скрипта;
afterResize — срабатывает при изменении размеров окна браузера;
afterSlideLoad — срабатывает при перемещении от слайда к слайду, и только после полной загрузки следующего слайда;
onSlideLeave — срабатывает при перемещении к следующему слайду
Итак приступим, данный плагин состоит из одного файла index.html и ниже показан его исходный код:
<!DOCTYPE html> <html xmlns="http://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. Если она у вас не подключена — подключите ее.
Теперь рассмотрим разметку нашего файла. У нас присутствует общий контейнер div с идентификатором fullpage — в данном блоке расположены секции, Каждая наша секция является отдельным блоком div с классом section. В данных секциях мы можем размещать любой контент, но помимо размещения контента мы можем размещать слайдшоу, для этого мы в секции создадим блок div с классом slide, и данный слайд тоже может размещать в себе произвольный контент.
Скачать плагин FullPage.js мы можем на официальном сайте ww.alvarotrigo.com/fullPage
После того как мы скачали архив, мы его распаковываем и находим там главный файл библиотеки jquery.fullPage.js. Данный файл берем и копируем к себе в папку со скриптами и подключаем в <head>. Также советую подключить еще один файл jquery.slimscroll.min.js, он вам понадобится для создания вертикальной полосы прокрутки в отдельных блоках сайта.
<script type="text/javascript" src="js/jquery.fullPage.js"></script> <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script> |
Плюс в архиве вы найдете еще файл стилей, его тоже нужно подключить для правильной работы плагина.
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> |
Далее после подключения фалов выберем наш блок div с идентификатором fullpage, и при помощи jQuery библиотеки вызовем метод fullpage():
jQuery(document).ready(function($) {
$("#fullpage").fullpage({
sectionsColor:['#C63D0F','#1BBC9B','#7E8F7C']
});
})
|
Заметьте при вызове метода я использую настройку sectionsColor, она позволит мне задать каждой секции цвет фона.
Настройки плагина FullPage.js:
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)
});
}
}*/
});
})
|
