pagePiling.js — это библиотека, которая позволяет накладывать разделы сайта один на другой и открывать их с помощью прокрутки или по URL-адресу.
Введение
Основная суть библиотеки pagePiling.js — возможность создать лендинг в котором переключение между основными разделами происходит на основе полноэкранного слайдера или скролла.
Т.е. данное исполнение сайта или лендинга можно назвать полноэкранным скроллом или фиксированным скроллом страницы (англ. — fixed scroll).
Совместимость
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).
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'
});
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)
Copyright (c) 2014 Alvaro Trigo <alvaro@alvarotrigo.com>
Настоящим предоставляется бесплатное разрешение любому лицу, получившему копию данного программного обеспечения и сопутствующих файлов документации («Программное обеспечение»), работать с Программным обеспечением без ограничений, включая, без ограничения, права на использование, копирование, изменение, объединение, публикацию, распространение, сублицензирование и/или продажу копий Программного обеспечения, а также разрешать лицам, которым предоставляется Программное обеспечение, делать это при соблюдении следующих условий:
Вышеуказанное уведомление об авторском праве и данное уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОГО СОСТОЯНИЯ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГИЕ ОБЯЗАТЕЛЬСТВА, БУДЬ ТО ПО ДОГОВОРУ, В РЕЗУЛЬТАТЕ ПРАВОНАРУШЕНИЯ ИЛИ ИНЫМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ИЗ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ, В СВЯЗИ С НИМ ИЛИ В РЕЗУЛЬТАТЕ ЕГО ИСПОЛЬЗОВАНИЯ ИЛИ ДРУГИХ ОПЕРАЦИЙ С НИМ.