Полноэкранный слайдер с помощью библиотеки pagePiling.js

Основная суть библиотеки pagePiling.js - возможность создать лендинг в котором переключение между основными разделами происходит на основе полноэкранного слайдера или скролла.

Т.е. данное исполнение сайта или лендинга можно назвать полноэкранным скроллом или фиксированным скроллом страницы (англ. - fixed scroll).

pagePiling.js на GitHub

Демонстрация

Совместимость

pagePiling.js полностью функционирует во всех современных браузерах, а также в некоторых старых, таких как Internet Explorer 8, 9, Opera 12 и др. Он работает как в браузерах с поддержкой CSS3, так и в тех, в которых ее нет, что делает его идеальным для совместимости со старыми браузерами.

Он также разработан для работы на сенсорных устройствах, таких как мобильные телефоны или планшеты.

Использование

Как вы можете видеть в файлах примера, вам необходимо включить JavaScript файл jquery.pagepiling.js (или минифицированную версию jquery.pagepiling.min.js) и css-файл jquery.pagepiling.css плагина, а также jQuery.

Опционально вы можете добавить библиотеку jQuery UI, если хотите использовать другие эффекты анимации, кроме тех, что включены в библиотеку jQuery, а именно линейный или свинг-эффект.

Установка с помощью bower

Как вариант, вы можете установить pagePiling.js с помощью bower: Terminal:

bower install pagepiling.js

Включение файлов

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>

Опциональное использование CDN

Если вы предпочитаете использовать CDN для загрузки необходимых файлов, pagePiling.js находится на CDNJS.

Требуемая структура HTML

Каждый раздел будет определен с помощью div, содержащего класс section. Активным разделом по умолчанию будет первый раздел, который принимается за главную страницу.

<div id="pagepiling">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

Инициализация

Все, что вам нужно сделать, это вызвать плагин внутри функции $(document).ready:

$(document).ready(function() {
	$('#pagepiling').pagepiling();
});

Более сложная инициализация со всеми установленными опциями может выглядеть следующим образом:

$(document).ready(function() {
	$('#pagepiling').pagepiling({
	    menu: null,
        direction: 'vertical',
        verticalCentered: true,
        sectionsColor: [],
        anchors: [],
        scrollingSpeed: 700,
        easing: 'swing',
        loopBottom: false,
        loopTop: false,
        css3: true,
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['section1', 'section2', 'section3', 'section4']
        },
       	normalScrollElements: null,
        normalScrollElementTouchThreshold: 5,
        touchSensitivity: 5,
        keyboardScrolling: true,
        sectionSelector: '.section',
        animateAnchor: false,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
	});
});

Доступ к разделам

Для создания ссылок на определенный раздел вы можете использовать обычную URL-ссылку, если вы используете pagePiling.js с якорными ссылками (используя опцию anchors), то вы сможете использовать якорные ссылки также для перехода непосредственно к определенному разделу.

Например: http://alvarotrigo.com/pagePiling/#page2

Будьте осторожны! Теги data-anchor не могут иметь то же значение, что и любой элемент ID на сайте (или элемент NAME для IE).

Использование меню

Чтобы связать меню с активным разделом, необходимо воспользоваться опцией menu и использовать якорные ссылки (#), как описано в разделе опций данной докумментации.

Создание прокручиваемого раздела

Если вы хотите иметь раздел с большим содержимым и создать полосу прокрутки для этого раздела, вы можете сделать это, добавив класс pp-scrollable к этому разделу:

<div class="section pp-scrollable"></div>

Опции

verticalCentered: (по умолчанию true) Вертикальное центрирование содержимого внутри разделов.
scrollingSpeed: (по умолчанию 700) Скорость в миллисекундах для переходов прокрутки.
sectionsColor: (по умолчанию none) Определяет свойство CSS background-color для каждого раздела: Пример:

$('#pagepiling').pagepiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

anchors: (по умолчанию []) Определяет якорные ссылки (#example), которые будут отображаться в URL для каждого раздела. При использовании якорей навигация вперед и назад будет также возможна через браузер. Эта опция также позволяет пользователям делать закладки на определенный раздел. Будьте внимательны! Если вы используете якоря, они не могут иметь то же значение, что и любой элемент ID на сайте (или элемент NAME для IE).

Важно! Важно понимать, что значения в массиве опций anchors напрямую соотносятся с элементом с классом .section по его положению в разметке.

easing: (по умолчанию swing) Определяет эффект перехода, который будет использоваться для вертикальной прокрутки. Для использования любого другого перехода, кроме swing и linear, требуется jQuery UI. Вместо этого можно использовать другие библиотеки.
loopTop: (по умолчанию false) Определяет, должна ли прокрутка вверх в первой секции прокручиваться до последней или нет.
loopBottom: (по умолчанию false) Определяет, должна ли прокрутка вниз в последней секции прокручиваться до первой или нет.
css3: (по умолчанию true). Определяет, использовать ли JavaScript или CSS3 преобразования для прокрутки внутри разделов. Полезно для ускорения перемещения на планшетных и мобильных устройствах с браузерами, поддерживающими CSS3. Если этот параметр установлен в true и браузер не поддерживает CSS3, то вместо этого будет использоваться запасной вариант jQuery.
normalScrollElements: (по умолчанию null) Если вы хотите избежать автопрокрутки при прокрутке над некоторыми элементами, вам нужно использовать именно эту опцию. (полезно для карт, прокручиваемых div и т.д.) Для этого требуется строка с селекторами jQuery для этих элементов. (Например: normalScrollElements: '#element1, .element2')
normalScrollElementTouchThreshold: (по умолчанию 5) Определяет порог для количества переходов вверх по дереву html-узлов pagePiling будет проверять, соответствует ли normalScrollElements, чтобы разрешить функцию прокрутки div-ов на сенсорном устройстве. (Например: normalScrollElementTouchThreshold: 3)
keyboardScrolling: (по умолчанию true) Определяет, можно ли перемещаться по содержимому с помощью клавиатуры.
touchSensitivity: (по умолчанию 5) Определяет процент от ширины/высоты окна браузера и расстояние, на которое нужно провести пальцем для перехода к следующему разделу.
animateAnchor: (по умолчанию true) Определяет, будет ли загрузка сайта при указании якоря (#) прокручиваться с анимацией до места назначения или будет загружаться непосредственно на указанный раздел.
direction: (по умолчанию vertical) Определяет, будет ли прокрутка вертикальной или горизонтальной.
menu: (по умолчанию false) Селектор может быть использован для указания меню, которое будет связано с разделами. Таким образом, при прокрутке разделов будет активироваться соответствующий элемент в меню с использованием класса active. При этом меню не создается, а просто добавляется класс active к элементу данного меню с соответствующими якорными ссылками. Для того чтобы связать элементы меню с разделами, необходимо использовать HTML 5 data-tag (data-menuanchor) с теми же якорными ссылками, которые используются в разделах. Пример:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

Примечание! Элемент меню должен быть размещен вне обертки pagePiling (в примере выше id="pagepiling"), чтобы избежать проблем при использовании css3:true. В противном случае он будет добавлен к body самим плагином.

navigation: (по умолчанию false) Если установить значение true, то будет отображаться панель навигации, состоящая из маленьких кружков.
sectionSelector: (по умолчанию .section) Определяет селектор jQuery, используемый для секций плагина. Иногда его нужно менять, чтобы избежать проблем с другими плагинами, использующими те же селекторы, что и pagePiling.js.

Методы

moveSectionUp()

Прокручивает один раздел вверх:

$.fn.pagepiling.moveSectionUp();

moveSectionDown()

Прокручивает один раздел вниз:

$.fn.pagepiling.moveSectionDown();

moveTo(section)

Прокручивает страницу до указанного раздела.

/* Прокрутка до раздела с якорной ссылкой `firstSection`  */
$.fn.pagepiling.moveTo('firstSection');

// Прокрутка до 3-го раздела на сайте
$.fn.pagepiling.moveTo(3);

// Что то же самое, что
$.fn.pagepiling.moveTo(3);

setAllowScrolling(boolean)

Добавляет или удаляет возможность прокрутки разделов с помощью колеса мыши/трекпада или сенсорных жестов (по умолчанию эта функция активна).

$.fn.pagepiling.setAllowScrolling(false);

setKeyboardScrolling(boolean)

Добавляет или убирает возможность прокрутки разделов с помощью стрелок клавиатуры (по умолчанию эта функция активна).

$.fn.pagepiling.setKeyboardScrolling(false);

setScrollingSpeed(milliseconds)

Определяет скорость прокрутки в миллисекундах.

$.fn.pagepiling.setScrollingSpeed(700);

Обратные вызовы

afterLoad (anchorLink, index)

Обратный вызов, выполняемый после загрузки разделов, после завершения прокрутки. Параметры:

anchorLink: якорьСсылка, соответствующая разделу.
index: индекс раздела. Начиная с 1.

В случае, если в плагине не определены anchorLinks, параметр index будет единственным, который можно использовать.

Пример:

	$('#pagepiling').pagepiling({
		anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

		afterLoad: function(anchorLink, index){
			//использование index
			if(index == 3){
				alert("Section 3 ended loading");
			}

			//использование anchorLink
			if(anchorLink == 'secondPage'){
				alert("Section 2 ended loading");
			}
		}
	});

onLeave (index, nextIndex, direction)

Этот обратный вызов запускается, когда пользователь покидает раздел, при переходе к новому разделу.

Параметры:

index: индекс покидаемого раздела. Начиная с 1.
nextIndex: индекс раздела назначения. Начиная с 1.
direction: будет принимать значения up или down в зависимости от направления прокрутки.

Пример:

	$('#pagepiling').pagepiling({
		onLeave: function(index, nextIndex, direction){
			//после покидания раздела 2
			if(index == 2 && direction =='down'){
				alert("Идем в раздел 3!");
			}

			else if(index == 2 && direction == 'up'){
				alert("Идем в раздел 1!");
			}
		}
	});

afterRender()

Этот обратный вызов выполняется сразу после генерации структуры страницы. Это обратный вызов, который можно использовать для инициализации других плагинов или запуска любого кода, требующего готовности документа (поскольку этот плагин изменяет DOM для создания результирующей структуры).

Пример:

	$('#pagepiling').pagepiling({
		afterRender: function(){
			alert("The resulting DOM structure is ready");
		}
	});

Лицензия

(The MIT License)

Настоящим предоставляется бесплатное разрешение любому лицу, получившему копию данного программного обеспечения и сопутствующих файлов документации ("Программное обеспечение"), работать с Программным обеспечением без ограничений, включая, без ограничения, права на использование, копирование, изменение, объединение, публикацию, распространение, сублицензирование и/или продажу копий Программного обеспечения, а также разрешать лицам, которым предоставляется Программное обеспечение, делать это при соблюдении следующих условий:

Вышеуказанное уведомление об авторском праве и данное уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ "КАК ЕСТЬ", БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОГО СОСТОЯНИЯ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГИЕ ОБЯЗАТЕЛЬСТВА, БУДЬ ТО ПО ДОГОВОРУ, В РЕЗУЛЬТАТЕ ПРАВОНАРУШЕНИЯ ИЛИ ИНЫМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ИЗ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ, В СВЯЗИ С НИМ ИЛИ В РЕЗУЛЬТАТЕ ЕГО ИСПОЛЬЗОВАНИЯ ИЛИ ДРУГИХ ОПЕРАЦИЙ С НИМ.

Полноэкранный слайдер с помощью библиотеки pagePiling.js

Введение

Совместимость

Использование

Установка с помощью bower

Включение файлов

Опциональное использование CDN

Требуемая структура HTML

Инициализация

Доступ к разделам

Использование меню

Опции

Методы

moveSectionUp()

moveSectionDown()

moveTo(section)

setAllowScrolling(boolean)

setKeyboardScrolling(boolean)

setScrollingSpeed(milliseconds)

Обратные вызовы

afterLoad (anchorLink, index)

onLeave (index, nextIndex, direction)

afterRender()

Лицензия

Сергей Ермилов

Похожие посты

Добавить комментарий Отменить ответ