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

Приветствую! В данном уроке мы рассмотрим плагин библиотеки 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)
					});
				}
 
			}*/
 
		});
	})

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