FullPage — создание одностраничника со поекранным скроллом

Создано автором 30.03.2020 в Скрипты

Приветствую! В данном уроке мы рассмотрим плагин библиотеки 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 и ниже показан его исходный код:

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
74
 
<!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, он вам понадобится для создания вертикальной полосы прокрутки в отдельных блоках сайта.

1
2
&lt;script type="text/javascript" src="js/jquery.fullPage.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.slimscroll.min.js"&gt;&lt;/script&gt;

Плюс в архиве вы найдете еще файл стилей, его тоже нужно подключить для правильной работы плагина.

1
&lt;link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /&gt;

Далее после подключения фалов выберем наш блок div с идентификатором fullpage, и при помощи jQuery библиотеки вызовем метод fullpage():

1
2
3
4
5
jQuery(document).ready(function($) {
$("#fullpage").fullpage({
sectionsColor:['#C63D0F','#1BBC9B','#7E8F7C']
});
})

Заметьте при вызове метода я использую настройку sectionsColor, она позволит мне задать каждой секции цвет фона.

Настройки плагина FullPage.js:

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)
});
}
 
}*/
 
});
})

Вам также может понравиться

JQuery nice select — заменяем стандартный select

Добавление клаcса при наведении на JS