| 7Кб в формате gzip | Создано @imac2
Простая и удобная в использовании библиотека для создания веб-сайтов с полноэкранной прокруткой (также известных, как одностраничные сайты). Она позволяет создавать веб-сайты с полноэкранной прокруткой, а также добавлять горизонтальные ползунки для разделов сайта.
Настройка библиотеки и срочные изменения доступны по запросу за разумную плату. Contact me.
Введение
Более чем приветствуются ваши предложения, касающиеся не только функций и возможностей, но и улучшения стиля кодирования. Давайте вместе создадим замечательную библиотеку, чтобы облегчить жизнь пользователям!
Совместимость
fullPage.js полностью функционирует во всех современных браузерах, также, как и в некоторых устаревших, таких как Internet Explorer 8, 9, Opera 12 и т.д. Работает в браузерах, имеющих и не имеющих поддержку CSS3, что обеспечивает идеальную совместимость с устаревшими браузерами. Обеспечивает поддержку сенсорного управления для мобильных телефонов, планшетов и компьютеров с сенсорным экраном.
Выражаем особую благодарность Browserstack за поддержку fullpage.js.
Лицензия
Коммерческая лицензия
Если вы хотите использовать fullPage для разработки коммерческих сайтов, тем, проектов и приложений, то вам подойдёт коммерческая лицензия. С такой опцией ваш исходный код будет закрытым. Это значит, что вам не придётся менять весь исходный код вашего приложения на лицензию с открытым исходным кодом. [Приобретите Коммерческую лицензию Fullpage здесь]
Лицензия с открытым исходным кодом
Если вы создаёте приложение с открытым исходным кодом по лицензии, совместимой с Лицензией GNU GPL v3, вы можете использовать fullPage на условиях GPLv3.
Сведения об авторе в JavaScript и файлах CSS должны оставаться без изменений (даже после комбинации или минификации)
Прочесть больше о лицензии fullPage.
Использование
Как вы можете увидеть в файлах-примерах, вам необходимо будет включить:
- Библиотеку jQuery. (1.6.0 минимум)
- Файл JavaScript
jquery.fullPage.js
fullpage.js
(или его минифицированную версиюjquery.fullPage.min.js
fullpage.min.js
) - Файл css
jquery.fullPage.css
- Файл css
fullpage.css
Опционально, при использовании css3:false
вы можете добавить библиотеку jQuery UI, в случае если вы хотите использовать другие анимационные эффекты, в дополнение к включённым в библиотеку jQuery (linear
и swing
), или эффект, включённый по умолчанию в fullPage.js(easeInOutCubic
).
Установка bower или npm
Опционально, вы можете установить fullPage.js с bower или npm согласно вашим предпочтениям:
Включение файлов:
<link rel="stylesheet" type="text/css" href="fullpage.css" /><link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Следующая строчка опциональна. Необходима лишь в случае, если вы используете опцию css3:false и хотите использовать другие анимационные эффекты, кроме "linear", "swing" или "easeInOutCubic". --> <script src="vendors/easings.min.js"></script><script src="vendors/jquery.easings.min.js"></script><!-- Следующая строчка опциональна, необходима лишь в случае, если вы хотите использовать опцию `scrollOverflow:true` --> <script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage.js"></script><script type="text/javascript" src="jquery.fullPage.js"></script>
Опциональное использование CDN
Если вы предпочитаете использовать CDN для загрузки необходимых файлов, fullPage.js есть в CDNJS: https://cdnjs.com/libraries/fullPage.js
Инициализация
Всё, что вам требуется сделать, - вставить fullPage.js в функцию $(document).ready
:
$(document).ready(function() { $('#fullpage').fullpage(); });
Инициализация с Vanilla Javascript
Всё, что вам нужно сделать, - это указать fullPage.js перед закрывающим тегом </body>
.
new fullpage('#fullpage', { //options here autoScrolling:true, scrollHorizontally: true }); //methods fullpage_api.setAllowScrolling(false);
Инициализация с jQuery
Если хотите, можете также использовать fullpage.js в качестве плагина jQuery!
$(document).ready(function() { $('#fullpage').fullpage({ //options here autoScrolling:true, scrollHorizontally: true }); //methods $.fn.fullpage.setAllowScrolling(false); });
Функции и методы можно делать так же, как и с jQuery, как в fullPage.js v2.X.
Пример Vanilla JS со всеми опциями
Более сложная инициализация с установкой всех параметров может выглядеть так:
var myFullpage = new fullpage('#fullpage', { //Навигация menu: '#menu', lockAnchors: false, anchors:['firstPage', 'secondPage'], navigation: false, navigationPosition: 'right', navigationTooltips: ['firstSlide', 'secondSlide'], showActiveTooltip: false, slidesNavigation: false, slidesNavPosition: 'bottom',$(document).ready(function() {$('#fullpage').fullpage({//Навигацияmenu: '#menu',lockAnchors: false,anchors:['firstPage', 'secondPage'],navigation: false,navigationPosition: 'right',navigationTooltips: ['firstSlide', 'secondSlide'],showActiveTooltip: false,slidesNavigation: false,slidesNavPosition: 'bottom',//Скроллинг css3: true, scrollingSpeed: 700, autoScrolling: true, fitToSection: true, fitToSectionDelay: 1000, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, continuousHorizontal: false, scrollHorizontally: false, interlockedSlides: false, dragAndMove: false, offsetSections: false, resetSliders: false, fadingEffect: false, normalScrollElements: '#element1, .element2', scrollOverflow: false, scrollOverflowReset: false, scrollOverflowOptions: null, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, bigSectionsDestination: null,//Скроллингcss3: true,scrollingSpeed: 700,autoScrolling: true,fitToSection: true,fitToSectionDelay: 1000,scrollBar: false,easing: 'easeInOutCubic',easingcss3: 'ease',loopBottom: false,loopTop: false,loopHorizontal: true,continuousVertical: false,continuousHorizontal: false,scrollHorizontally: false,interlockedSlides: false,dragAndMove: false,offsetSections: false,resetSliders: false,fadingEffect: false,normalScrollElements: '#element1, .element2',scrollOverflow: false,scrollOverflowReset: false,scrollOverflowOptions: null,touchSensitivity: 15,normalScrollElementTouchThreshold: 5,bigSectionsDestination: null,//Доступ keyboardScrolling: true, animateAnchor: true, recordHistory: true,//ДоступkeyboardScrolling: true,animateAnchor: true,recordHistory: true,//Дизайн controlArrows: true, verticalCentered: true, sectionsColor : ['#ccc', '#fff'], paddingTop: '3em', paddingBottom: '10px', fixedElements: '#header, .footer', responsiveWidth: 0, responsiveHeight: 0, responsiveSlides: false, parallax: false, parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},//ДизайнcontrolArrows: true,verticalCentered: true,sectionsColor : ['#ccc', '#fff'],paddingTop: '3em',paddingBottom: '10px',fixedElements: '#header, .footer',responsiveWidth: 0,responsiveHeight: 0,responsiveSlides: false,parallax: false,parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},//Настроить селекторы sectionSelector: '.section', slideSelector: '.slide',//Настроить селекторыsectionSelector: '.section',slideSelector: '.slide',lazyLoading: true,lazyLoading: true,//события onLeave: function(index, nextIndex, direction){}, afterLoad: function(origin, destination, direction){}, afterRender: function(){}, afterResize: function(width, height){}, afterResponsive: function(isResponsive){}, afterSlideLoad: function(section, origin, destination, direction){}, onSlideLeave: function(section, origin, destination, direction){}//событияonLeave: function(index, nextIndex, direction){},afterLoad: function(anchorLink, index){},afterRender: function(){},afterResize: function(){},afterResponsive: function(isResponsive){},afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}});});
Создание ссылок на разделы или слайды
Если вы используете fullPage.js с ссылками привязки для разделов (пользуясь опцией anchors
или атрибутом data-anchor
в каждом разделе), то вы сможете использовать ссылки привязки также для перемещения напрямую к определённому слайду в разделе.
При следующей инициализации:
new fullpage('#fullpage', { anchors:['firstPage', 'secondPage', 'thirdPage']$(document).ready(function() {$('#fullpage').fullpage({anchors:['firstPage', 'secondPage', 'thirdPage']});});
Привязка #secondPage/2
в конце URL определяет заданный раздел и слайд соответственно. В предыдущем URL заданным разделом будет являться раздел, определённый привязкой secondPage
, а заданным слайдом будет второй слайд, так как для этого мы и использовали индекс 2
. (первый слайд в разделе имеет индекс 0, так как технически это раздел).
Использование расширений
fullpage.js предоставляет ряд расширений, которые вы можете использовать для улучшения его функций, предусмотренных по умолчанию. Все они представлены как опции fullpage.js.
Для расширений вам требуется использовать минифицированный файл jquery.fullpage.extensions.min.js
fullpage.extensions.min.js
, находящийся в папке dist
, а не обычный файл fullPage.js (jquery.fullpage.js
fullpage.js
или jquery.fullpage.min.js
fullpage.min.js
).
После приобретения файла расширения вам нужно будет добавить его перед fullPage. Например, если я хочу использовать расширение Continuos Horizontal, мне нужно будет включить файл расширения, а затем – версию файла fullPage для расширений.
<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script> <script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script><script type="text/javascript" src="fullpage/jquery.fullpage.extensions.min.js"></script>
Ключ активации и ключ лицензии потребуются для каждого расширения. Узнайте более подробно об этом здесь.
Опции
-
licenseKey
: (по умолчаниюnull
). Эта опция является обязательной. Если вы используете fullPage для проекта с закрытым исходным кодом, то вам следует воспользоваться лицензионным ключом, предоставляемым при приобретении коммерческой лицензии fullPage. Или же вы можете использовать строкуOPEN-SOURCE-GPLV3-LICENSE
. Вы можете прочесть подробнее о лицензиях здесь и на веб-сайте. -
v2compatible
: (значение по умолчанию:false
). Определяет 100% совместимость с любым кодом, написанным для версии 2, игнорируя новые функции или изменения API версии 3. Классы состояний, сигнатуры обратных вызовов и т.п. будут работать так же, как в версии 2. Обращаем ваше внимание на то, что данная опция в будущем будет удалена.. -
controlArrows
: (по умолчаниюtrue
) Определяет использование клавиш-стрелок для передвижения вправо или влево при просмотре слайдов. -
verticalCentered
: (по умолчаниюtrue
) Вертикальное центрирование контента в разделах. При установке данного расширения -true
, ваш контент будет обёрнут библиотекой. Рассмотрите возможность делегирования или загрузите ваши скрипты для обратного вызоваafterRender
. -
scrollingSpeed
: (по умолчанию700
) Ускорьте на миллисекунды переходы при скроллинге. -
sectionsColor
: (по умолчаниюnone
) Присвойте CSS-свойствоbackground-color
каждому разделу. Пример:
new fullpage('#fullpage', {$('#fullpage').fullpage({sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], });
-
anchors
: (по умолчанию[]
) Обеспечивает размещение ссылок с привязками (#пример) в URL для каждого раздела. Значения привязок должны быть уникальными. Положение привязок в ряду будет определять то, к какому разделу применяется привязка. (вторая позиция для второго раздела и так далее). Использование привязок также даёт возможность навигации вперёд и назад в браузере. Эта опция также даёт пользователям возможность добавлять в закладки определённый раздел или слайд. Внимание! привязки не могут иметь значение, совпадающее с каким-либо элементом ID на сайте (или элементом NAME - для IE). Теперь привязки могут добавляться прямо в HTML-структуре с помощью атрибутаdata-anchor
, как объясняется здесь. -
lockAnchors
: (по умолчаниюfalse
) Определяет, будут ли вообще действовать в библиотеке привязки в URL. Вы по-прежнему сможете использовать привязки в закрытом формате для ваших собственных функций и обратных вызовов, но в скроллинге сайта они участвовать не будут. Это полезная функция, если вы хотите совместить fullPage.js с другими плагинами, использующими привязки в URL.
Важно Нужно понимать, что значения в ряду опций anchors
напрямую соотносятся с элементом класса .section
при помощи их местоположения в разметке.
-
easingcss3
: (по умолчаниюease
) Определяет эффект перехода для применения в случае использованияcss3:true
. Вы можете использовать предустановленные эффекты (такие какlinear
,ease-out
...) или создать свои собственные при помощи функцииcubic-bezier
. Вы также можете использовать для этой цели [Matthew Lein CSS Easing Animation Tool](http://matthewlein.com/ceaser/. -
loopTop
: (по умолчаниюfalse
) Определяет, будет ли осуществляться скроллинг к последнему разделу при пролистывании первого раздела вверх. -
loopBottom
: (по умолчаниюfalse
) Определяет, будет ли осуществляться скроллинг к первому разделу при пролистывании последнего раздела вниз. -
loopHorizontal
: (по умолчаниюtrue
) Определяет, будут ли горизонтальные слайдеры работать циклично после перехода к последнему или предыдущему слайду. -
css3
: (по умолчаниюtrue
). Определяет использование JavaScript или CSS3-трансформаций для скроллинга в пределах разделов и слайдов. Эта функция помогает ускорить пролистывание для планшетов и мобильных устройств, браузеры которых поддерживают CSS3. Если установлено значениеtrue
для этой опции и браузер не поддерживает CSS3, будет использована альтернативаjQuery. -
autoScrolling
: (по умолчаниюtrue
) Определяет использование «автоматического» скроллинга или «обычного». Также эта опция влияет на размещение разделов в окне браузера/устройства для планшетов и мобильных устройств. -
fitToSection
: (по умолчаниюtrue
) Определяет, нужна ли подстройка разделов под окно просмотра. При установке значенияtrue
для данной опции текущий активный раздел всегда будет заполнять окно просмотра. В противном случае пользователь будет иметь возможность остановиться на середине раздела (когда ) -
fitToSectionDelay
: (по умолчанию 1000). Если для опцииfitToSection
установлено значениеtrue
, данная функция замедлит подстройку на настроенные миллисекунды. -
scrollBar
: (по умолчаниюfalse
) Определяет, будет ли использоваться полоса прокрутки на сайте. При использовании полосы прокрутки функцияautoScrolling
будет работать как обычно. Пользователь по-прежнему сможет пролистывать сайт с помощью полосы прокрутки, и fullPage.js подстроит раздел под экран по окончании скроллинга. -
paddingTop
: (по умолчанию0
) Определяет верхний отступ для каждого раздела в числовом формате (paddingTop: '10px', paddingTop: '10em'...) Данная функция удобна при использовании фиксированных верхних колонтитулов. -
paddingBottom
: (по умолчанию0
) Определяет нижний отступ для каждого раздела в числовом формате (paddingBottom: '10px', paddingBottom: '10em'...). Данная функция удобна при использовании фиксированных нижних колонтитулов. -
fixedElements
: (по умолчаниюnull
) Определяет, какие элементы будут исключены из структуры скроллинга плагина, что необходимо при использовании опцииcss3
для их фиксации. Для этого необходима строка с селекторамиjQueryJavascript для данных элементов. (Например:fixedElements: '#element1, .element2'
) -
normalScrollElements
: (по умолчаниюnull
) Если вы хотите избежать автопрокрутки при скроллинге некоторых элементов, вам нужно использовать эту опцию. (пригодится для карт, прокрутки div-элементов и т.д.) Для этого необходима строка с селекторамиjQueryJavascript для данных элементов. (Например:normalScrollElements: '#element1, .element2'
). Данную опцию следует применять к самим разделам/слайдам. -
normalScrollElementTouchThreshold
: (по умолчанию5
) Определяет порог количества пролистываний, которое проверит дерево узлов html Fullpage, чтобы убедиться, чтоnormalScrollElements
позволяет скроллинг на div-элементах на сенсорном устройстве. (Например:normalScrollElementTouchThreshold: 3
) -
bigSectionsDestination
: (по умолчаниюnull
) Определяет, как должна осуществляться прокрутка к разделу, размер которого превышает размер окна просмотра. По умолчанию fullPage.js пролистывает вверх, если вы попадаете из раздела над заданным, и вниз, если вы попадаете из раздела под заданным. Возможные значения:top
,bottom
,null
. -
keyboardScrolling
: (по умолчаниюtrue
) Определяет возможность навигации на сайте при помощи клавиатуры. -
touchSensitivity
: (по умолчанию5
) Определяет ширину и высоту браузеров в процентах, а также то, насколько длинным должно быть пролистывание для перехода к следующему разделу/слайду. -
continuousVertical
: (по умолчаниюfalse
) Определяет, будет ли осуществляться скроллинг к последнему разделу при пролистывании первого раздела вверх и к первому разделу при пролистывании последнего раздела вниз. Опция несовместима с опциямиloopTop
,loopBottom
и любыми полосами прокрутки, используемыми на сайте (scrollBar:true
илиautoScrolling:false
). -
continuousHorizontal
: (по умолчаниюfalse
) Расширение fullpage.js. Определяет, будет ли при пролистывании вправо последнего слайда осуществляться прокрутка вправо к первому слайду, а также приведёт ли прокрутка влево первого слайда к прокрутке влево к последнему слайду. Опция несовместима с опциейloopHorizontal
. Необходима версия fullpage.js >= 2.8.3. -
scrollHorizontally
: (по умолчаниюfalse
) Расширение fullpage.js. Определяет осуществление горизонтального пролистывания ползунков при помощи колеса мыши или трекпада. Идеальна для рассказов. Необходима версия fullpage.js >= 2.8.3. -
interlockedSlides
: (по умолчаниюfalse
) Расширение fullpage.js. Определяет ,будет ли при передвижении одного горизонтального ползунка осуществляться пролистывание ползунков другого раздела в том же направлении. Возможные значения:true
,false
или последовательность взаимосвязанных разделов. Например:[1,3,5]
, начиная с 1. Необходима версия fullpage.js >= 2.8.3. -
dragAndMove
: (по умолчаниюfalse
) Расширение fullpage.js. Активирует или деактивирует протягивание и пролистывание разделов и слайдов при помощи мыши или пальцев. Возможные значения:true
,false
,vertical
,horizontal
,fingersonly
,mouseonly
,. Необходима версия fullPage.js >= 2.8.9. -
offsetSections
: (по умолчаниюfalse
)Расширение fullpage.js. Обеспечивает возможность использовать неполноэкранные разделы на основании их процентных значений. Опция идеальна для демонстрации пользователю того, что на сайте есть больше контента, показывая часть следующего или предыдущего раздела. Необходима версия fullPage.js >= 2.8.8 Для определения процентного значения каждого раздела необходимо использовать атрибутdata-percentage
. Центрирование раздела в окне просмотра может определяться при помощи логического значения в атрибутеdata-centered
(по умолчаниюtrue
, если не определено). Например:
<div class="section" data-percentage="80" data-centered="true">
<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Первый раздел</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Второй раздел</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Третий раздел</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Четвёртый раздел</a></li> </ul>
new fullpage('#fullpage', {$('#fullpage').fullpage({anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu' });
Внимание: элемент меню должен помещаться за пределами обёрточного кода для полного экрана во избежание проблем при использовании css3:true
. В противном случае он будет присоединён к body
самим плагином.
-
navigation
: (по умолчаниюfalse
) При установке значенияtrue
панель навигации будет отображена в виде небольших кружков. -
navigationPosition
: (по умолчаниюnone
) Могут быть установлены значенияleft
илиright
. Опция определяет, какое положение займет панель навигации (если она используется). -
navigationTooltips
: (по умолчанию []) Определяет справочные надписи, которые будут показаны для кружков навигационной панели, если они используются. Например:navigationTooltips: ['firstSlide', 'secondSlide']
. Вы можете также определить их с помощью атрибутаdata-tooltip
в каждом разделе, если хотите. -
showActiveTooltip
: (по умолчаниюfalse
) Показывает постоянную справочную надпись для просматриваемого в данный момент раздела в вертикальной навигации. -
slidesNavigation
: (по умолчаниюfalse
) При установке значенияtrue
навигационная панель будет отображаться в виде небольших кружков для каждого горизонтального ползунка сайта. -
slidesNavPosition
: (по умолчаниюbottom
) Определяет местоположение горизонтальной навигационной панели для слайдеров. Возможные значения:top
иbottom
. При желании вы можете настроить стили CSS для определения расстояния от верхней до нижней части, так же как и любой другой стиль, например, цвет. -
scrollOverflow
: (по умолчаниюfalse
) (опция несовместима с IE 8) определяет необходимость создания прокрутки для раздела/слайда, если контент превышает его высоту. При установке значенияtrue
ваш контент будет обёрнут плагином. Рассмотрите возможность делегирования или загрузите ваши скрипты для обратного вызоваafterRender
. При установке значенияtrue
необходима библиотека разработчикаscrolloverflow.min.js
, которая должна быть загружена до загрузки плагина fullPage.js, но послеjQueryjQuery (если используется). Например:
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage.js"></script><script type="text/javascript" src="jquery.fullPage.js"></script>
Чтобы предотвратить создание fullpage.js полосы прокрутки в определённых разделах или слайдах, используйте класс fp-noscroll
. Например: <div class="section fp-noscroll">
Вы можете избежать применения scrolloverflow в отзывчивом режиме, используя `fp-auto-height-responsive в элементе раздела.
-
scrollOverflowReset
: (по умолчаниюfalse
) Расширение fullpage.js. При установке значенияtrue
будет осуществляться прокрутка контента раздела/слайда с помощью полосы прокрутки при покидании другого вертикального раздела. Таким образом, раздел/слайд будет всегда показывать начало контента даже при скроллинге из раздела/слайда, расположенного ниже. -
scrollOverflowOptions
: при применении scrollOverflow:true fullpage.js будет использовать модифицированную версию iScroll.js libary. Вы можете настроить поведение прокрутки, обеспечив fullpage.js опциями iScroll.js, которые вы хотите использовать. Более подробную информацию вы можете найти в документации. -
sectionSelector
: (по умолчанию.section
) Определяет селекторjQueryJavascript, используемый для разделов с плагинами. Иногда требуется изменить его, чтобы избежать проблем с другими плагинами, использующими те же селекторы, что и fullpage.js. -
slideSelector
: (по умолчанию.slide
) Определяет селекторjQueryJavascript, используемый для слайдов с плагинами. Иногда требуется изменить его, чтобы избежать проблем с другими плагинами, использующими те же селекторы, что и fullpage.js. -
responsiveWidth
: (по умолчанию0
) Будет использоваться стандартная прокрутка (autoScrolling:false
), если ширина меньше, чем заданное значение в пикселях. Классfp-responsive
добавляется к тегу body, если пользователь желает использовать для собственного отзывчивого CSS. Например, если установлено значение 900, то, если ширина браузера составляет менее 900, плагин будет прокручивать, как обычный сайт. -
responsiveHeight
: (по умолчанию0
) Будет использоваться стандартная прокрутка (autoScrolling:false
), если высота меньше, чем заданное значение в пикселях. Классfp-responsive
добавляется к тегу body, если пользователь желает использовать для собственного отзывчивого CSS. Например, если установлено значение 900, то, если высота браузера составляет менее 900, плагин будет прокручивать, как обычный сайт. -
responsiveSlides
: (по умолчаниюfalse
) Расширение fullpage.js. При установке значенияtrue
слайды будут трансформироваться в вертикальные разделы при активации отзывчивого режима. (с помощью опцийresponsiveWidth
илиresponsiveHeight
, подробно описанных выше). Необходима версия fullpage.js >= 2.8.5. -
parallax
: (по умолчаниюfalse
) Расширение fullpage.js. Определяет, будут ли использоваться эффекты параллакс для фона разделов / слайдов. Узнайте больше об использовании опции параллакс здесь. -
parallaxOptions
: (по умолчанию:{ type: 'reveal', percentage: 62, property: 'translate'}
). Позволяет настраивать параметры эффекта параллакс для фона при использовании опции parallax:true. Узнайте больше об использовании опции параллакс здесь. -
lazyLoading
: (по умолчаниюtrue
) Отложенная загрузка включена по умолчанию, что означает, что данная опция будет осуществлять отложенную загрузку любого медиа-элемента, содержащего атрибутdata-src
, как описано в документации отложенной загрузки. Если вы желаете использовать любую другую библиотеку отложенной загрузки, вы можете деактивировать данную функцию fullpage.js.
Функции
Можете увидеть их в действии здесь
moveSectionUpgetActiveSection()
Демо Даёт объект (наберите Section), содержащий активный слайд и его свойства.
fullpage_api.getActiveSection();
getActiveSlide()
Демо Даёт объект (наберите Slide), содержащий активный раздел и его свойства.
fullpage_api.getActiveSlide();
moveSectionUp()
Демо Прокручивает на один раздел вверх:
fullpage_api.moveSectionUp();$.fn.fullpage.moveSectionUp();
moveSectionDown()
Демо Прокручивает на один раздел вниз:
fullpage_api.moveSectionDown();$.fn.fullpage.moveSectionDown();
moveTo(раздел, слайд)
Демо Прокручивает страницу к заданному разделу и слайду. Первый слайд, отображающийся по умолчанию, будет иметь индекс 0.
/*Прокручивание к разделу с ссылкой с привязкой `firstSlide` и ко 2-му слайду */ fullpage_api.moveTo('firstSlide', 2);$.fn.fullpage.moveTo('firstSlide', 2);
//Прокручивание к 3-му разделу на сайте fullpage_api.moveTo(3, 0);$.fn.fullpage.moveTo(3, 0);//То же самое, что и fullpage_api.moveTo(3);$.fn.fullpage.moveTo(3);
silentMoveTo(раздел, слайд)
Демо Абсолютно то же самое, что и moveTo
, но в этом случае функция выполняет прокрутку без анимации. Прямой переход к заданной точке.
/*Прокручивание к разделу с ссылкой с привязкой `firstSlide` и ко 2-му слайду */ fullpage_api.silentMoveTo('firstSlide', 2);$.fn.fullpage.silentMoveTo('firstSlide', 2);
moveSlideRight()
Демо Прокручивает горизонтальный ползунок текущего раздела к следующему слайду:
fullpage_api.moveSlideRight();$.fn.fullpage.moveSlideRight();
moveSlideLeft()
Демо Прокручивает горизонтальный ползунок текущего раздела к предыдущему слайду:
fullpage_api.moveSlideLeft();$.fn.fullpage.moveSlideLeft();
setAutoScrolling(логическая операция)
Демо Устанавливает конфигурацию скроллинга в режиме реального времени. Определяет поведение прокрутки страницы. При установке значения true
будет использоваться "автоматический" скроллинг, в противном случае будет применяться "стандартная" прокрутка сайта или прокрутка "вручную".
fullpage_api.setAutoScrolling(false);$.fn.fullpage.setAutoScrolling(false);
setFitToSection(логическая операция)
Демо Устанавливает значение для опции fitToSection
, определяющей, подстраивать ли раздел под экран.
fullpage_api.setFitToSection(false);$.fn.fullpage.setFitToSection(false);
fitToSection()
Демо Прокручивает к ближайшему активному разделу, подстраивая его под окно просмотра.
fullpage_api.fitToSection();$.fn.fullpage.fitToSection();
setLockAnchors(логическая операция)
Демо Устанавливает значение для опции lockAnchors
, определяющей, будут ли привязки отражаться в URL.
fullpage_api.setLockAnchors(false);$.fn.fullpage.setLockAnchors(false);
-
directions
: (опциональный параметр) Значения:all
,up
,down
,left
,right
или их комбинация, разделённая запятыми, например:down, right
. Функция определяет направление, в котором будет активирован или деактивирован скроллинг.
//деактивация прокрутки fullpage_api.setAllowScrolling(false);$.fn.fullpage.setAllowScrolling(false);//деактивация прокрутки вниз fullpage_api.setAllowScrolling(false, 'down');$.fn.fullpage.setAllowScrolling(false, 'down');// деактивация прокрутки вниз и вправо fullpage_api.setAllowScrolling(false, 'down, right');$.fn.fullpage.setAllowScrolling(false, 'down, right');
-
directions
: (опциональный параметр) Значения:all
,up
,down
,left
,right
или их комбинация, разделённая запятыми, например:down, right
. Функция определяет направление, в котором будет активирован или деактивирован скроллинг.
// деактивация всей прокрутки с помощью клавиатуры fullpage_api.setKeyboardScrolling(false);// деактивация всей прокрутки с помощью клавиатуры $.fn.fullpage.setKeyboardScrolling(false);// деактивация прокрутки вниз с помощью клавиатуры fullpage_api.setKeyboardScrolling(false, 'down');$.fn.fullpage.setKeyboardScrolling(false, 'down');//деактивация прокрутки вниз и вправо с помощью клавиатуры fullpage_api.setKeyboardScrolling(false, 'down, right');//деактивация прокрутки вниз и вправо с помощью клавиатуры $.fn.fullpage.setKeyboardScrolling(false, 'down, right');
setRecordHistory(логическая операция)
Демо Определяет, записывать ли историю для каждого изменения hash в URL.
fullpage_api.setRecordHistory(false);$.fn.fullpage.setRecordHistory(false);
setScrollingSpeed(миллисекунды)
Демо Определяет скорость прокрутки в миллисекундах.
fullpage_api.setScrollingSpeed(700);$.fn.fullpage.setScrollingSpeed(700);
-
type
: (опциональный параметр) может быть пустым или иметь значениеall
. Если установленоall
, HTML-разметка и стили, используемые fullpage.js, будут удалены. Таким образом, оригинальная HTML-разметка, используемая до произведения любой модификации плагина, будет сохранена.
//разрушение всех событий Javascript, созданных fullPage.js (прокручивания, изменения hash в URL...) fullpage_api.destroy();$.fn.fullpage.destroy();// разрушение всех событий Javascript и любых модификаций, произведённых fullPage.js поверх вашей оригинальной HTML-разметки. fullpage_api.destroy('all');$.fn.fullpage.destroy('all');
reBuild()
Обновляет DOM-структуру для подстройки под новый размер окна или его содержимого. Идеальна для использования в комбинации с вызовами AJAX или внешними изменениями в DOM-структуре сайта, особенно при применении scrollOverflow:true
.
fullpage_api.reBuild();$.fn.fullpage.reBuild();
setResponsive(логическая операция)
Демо Устанавливает отзывчивый режима на странице. При установке хначения true
автопрокрутка будет отключена, результат будет тем же самым, как при активации опций responsiveWidth
или responsiveHeight
.
fullpage_api.setResponsive(true);$.fn.fullpage.setResponsive(true);
responsiveSlides.toSections()
Расширение fullpage.js. Необходима версия fullpage.js >= 2.8.5. Трансформирует горизонтальные слайды в вертикальные разделы.
fullpage_api.responsiveSlides.toSections();$.fn.fullpage.responsiveSlides.toSections();
responsiveSlides.toSlides()
Расширение fullpage.js. Необходима версия fullpage.js >= 2.8.5. Трансформирует оригинальные слайды (теперь трансформированные в вертикальные разделы) обратно в горизонтальные слайды.
fullpage_api.responsiveSlides.toSlides();$.fn.fullpage.responsiveSlides.toSlides();
Обратные вызовы
Демо Можете увидеть их в действии здесь.
afterLoad (anchorLink
, index
)
Некоторые обратные вызовы, такие как onLeave
, будут содержать тип параметров Section
или Slide
. Эти объекты будут содержать следующие свойства:
-
anchor
: (String) ссылка с привязкой объекта. -
index
: (Number) индекс объекта. -
item
: (DOM element) элемент объекта. -
isFirst
: (Boolean) определяет, является ли объект первым дочерним элементом. -
isLast
: (Boolean) определяет, является ли объект последним дочерним элементом.
afterLoad (origin
, destination
, direction
)
Обратный вызов активируется после загрузки разделов и завершения прокрутки. Параметры:
-
anchorLink
: ссылка с привязкой, соотносящаяся с разделом. -
index
: индекс раздела. Начиная с 1.
В случае, если ссылки с привязками не определены в плагине, используется только параметр index
.
-
origin
: (Object) активный раздел -
destination
: (Object) конечный раздел. -
direction
: (String) будет принимать значенияup
илиdown
в зависимости от направления скроллинга.
Пример:
new fullpage('#fullpage', {$('#fullpage').fullpage({anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(origin){ var loadedSection = this;afterLoad: function(anchorLink, index){var loadedSection = $(this);//использование индекса if(origin.index == 2){if(index == 3){alert("Section 3 ended loading"); } //использование ссылки с привязкой if(origin.anchor == 'secondSlide'){if(anchorLink == 'secondSlide'){alert("Section 2 ended loading"); } } });
Параметры:
-
index
: индекс раздела, который покидает пользователь. Начиная с 1. -
nextIndex
: индекс заданного раздела. Начиная с 1. -
origin
: (Object) исходный раздел. -
destination
: (Object) конечный раздел. -
direction
: (String) будетиметьпринимать значенияup
илиdown
в зависимости от направления скроллинга.
Пример:
new fullpage('#fullpage', { onLeave: function(origin, destination, direction){ var leavingSection = this;$('#fullpage').fullpage({onLeave: function(index, nextIndex, direction){var leavingSection = $(this);//после покидания раздела 2 if(origin.index == 1 && direction =='down'){if(index == 2 && direction =='down'){alert("Going to section 3!"); } else if(origin.index == 1 && direction == 'up'){else if(index == 2 && direction == 'up'){alert("Going to section 1!"); } } });
Отмена прокрутки до её осуществления
Вы можете отменить прокрутку, установив возврат false
на обратном вызове onLeave
:
new fullpage('#fullpage', { onLeave: function(origin, destination, direction){$('#fullpage').fullpage({onLeave: function(index, nextIndex, direction){//прокрутка не будет осуществлена, если заданный раздел – раздел 3 if(destination.index == 2){if(nextIndex == 3){return false; } } });
Пример:
new fullpage('#fullpage', {$('#fullpage').fullpage({afterRender: function(){ var pluginContainer = this;var pluginContainer = $(this);alert("Финальная DOM-структура готова"); } });
afterResize()
Этот обратный вызов активируется после изменения размера окна браузера. Сразу после изменения размера разделов.
Параметры:
-
width
: (Number) ширина окна. -
height
: (Number) высота окна.
Пример:
new fullpage('#fullpage', { afterResize: function(width, height){ var pluginContainer = this;$('#fullpage').fullpage({afterResize: function(){var pluginContainer = $(this);alert("Завершено изменение размера разделов"); } });
Параметры:
-
isResponsive
: (Boolean) логическая операция, которая определяет переход в режим отзывчивости (true
) или переход обратно к стандартному режиму (false
).
Пример:
new fullpage('#fullpage', {$('#fullpage').fullpage({afterResponsive: function(isResponsive){ alert("Is responsive: " + isResponsive); } });
afterSlideLoad (anchorLink
, index
, slideAnchor
, slideIndex
)
afterSlideLoad (section
, origin
, destination
, direction
)
Обратный вызов активируется после загрузки слайда раздела и окончания прокрутки.Параметры:
-
anchorLink
: ссылка с привязкой, связанная с разделом. -
index
: индекс раздела. Начиная с 1. -
slideAnchor
: привязка, соответствующая слайду (при её наличии) -
slideIndex
: индекс слайда. Начиная с 1. (текущий слайд считается не слайдом, а разделом)
Если нет ссылок с привязками для слайда или слайдов, будет использоваться лишь параметр slideIndex
. Пример:
Параметры:
-
section
: (Object) активный вертикальный раздел. -
origin
: (Object) исходный горизонтальный слайд. -
destination
: (Object) конечный горизонтальный слайд. -
direction
: (String)right
илиleft
в зависимости от направления скроллинга.
Пример:
new fullpage('#fullpage', {$('#fullpage').fullpage({anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterSlideLoad: function( section, origin, destination, direction){ var loadedSlide = this;afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){var loadedSlide = $(this);//первый слайд второго раздела if(section.anchor == 'secondPage' && destination.index == 1){if(anchorLink == 'secondPage' && slideIndex == 1){alert("Первый слайд загружен"); } //второй слайд второго раздела (supposing #secondSlide is the //привязка для второго раздела if(section.index == 1 && destination.anchor == 'secondSlide'){if(index == 2 && slideIndex == 'secondSlide'){alert("Второй слайд загружен"); } } });
onSlideLeave (anchorLink
, index
, slideIndex
, direction
, nextSlideIndex
)
onSlideLeave (section
, origin
, destination
, direction
)
Этот обратный вызов активируется после того, как пользователь покидает слайд для перехода к другому, при переходе к новому слайду. Возврат false
отменит переход до его осуществления.
Параметр:
-
anchorLink
: ссылка с привязкой, связанная с разделом. -
index
: индекс раздела. Начиная с 1. -
slideIndex
: индекс слайда. Начиная с 0. -
direction
: будет иметь значенияright
илиleft
, в зависимости от направления прокрутки. -
nextSlideIndex
: индекс заданного слайда. Начиная с 0.
-
section
: (Object) активный вертикальный раздел. -
origin
: (Object) исходный горизонтальный слайд. -
destination
: (Object) конечный горизонтальный слайд. -
direction
: (String)right
илиleft
в зависимости от направления скроллинга.
Пример:
new fullpage('#fullpage', { onSlideLeave: function( section, origin, destination, direction){ var leavingSlide = this;$('#fullpage').fullpage({onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){var leavingSlide = $(this);//переход от первого слайда 2го раздела вправо if(section.index == 1 && origin.index == 0 && direction == 'right'){if(index == 2 && slideIndex == 0 && direction == 'right'){alert("Покидание первого слайда!!"); } // переход от 3го слайда 2го раздела влево if(section.index == 1 && origin.index == 2 && direction == 'left'){if(index == 2 && slideIndex == 2 && direction == 'left'){alert("Переход к слайду 2! "); } } });
Отмена перехода до его осуществления
Вы можете отменить переход с помощью возврата false
на обратном вызове onSlideLeave
. То же самое, что и при отмене перехода с помощью onLeave
.
Ресурсы
- Тема Wordpress
- Vue.js wrapper component
-
CSS Easing Animation Tool - Matthew Lein (поможет в определении значения
easingcss3
) - fullPage.js jsDelivr CDN
- плагин fullPage.js для October CMS
- плагин wordpress fullPage.js
- директива fullPage.js Angular2
- директива fullPage.js angular
- дополнение ember-cli fullPage.js
- fullPage.js Rails Ruby Gem
- Angular fullPage.js – адаптация для Angular.js v1.x
- Интеграция fullPage.js с Wordpress (Обучение)
Кто пользуется fullPage.js
Если вы хотите, чтобы ваша страница была указана в этом списке, пожалуйста, свяжитесь со мной и пришлите URL.
Лицензия
Комментарии в JavaScript и CSS-файлах должны оставаться неизменными (даже после комбинации или минификации )
(Лицензия MIT)
Copyright (c) 2013 Alvaro Trigo <alvaro@alvarotrigo.com>
Любому лицу, получившему копию данного ПО и файлы с соответствующей документацией ('Software'), бесплатно предоставляется разрешение торговать данным ПО без ограничений, неограниченные права на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий ПО, а также разрешение на вышеперечисленные действия тем, кому предоставлено ПО, при соблюдении следующих условий:
Вышеизложенное уведомление об авторском праве и данная заметка о разрешении будут включены во все копии или существенные части ПО.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ В ОТНОШЕНИИ ТОВАРНОГО СОСТОЯНИЯ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЁННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.