Слияние кода завершено, страница обновится автоматически
fullPage.js
Версия fullPage.js: http://img.shields.io/badge/fullPage.js-v2.9.4-brightgreen.svg
| 7Kb gziped | Создано @imac2
Простая библиотека JavaScript для создания веб-страниц с прокруткой на весь экран. (также известная как «одностраничные веб-сайты» или «onepage sites») Позволяет создавать прокрутку на весь экран, а также добавлять горизонтальные слайды в разделы.
Пригласите меня на кофе:
Персонализация библиотеки и срочные запросы по разумной цене. Свяжитесь со мной.
Введение Совместимость [Использование] Создание ссылок на разделы и слайды Создание меньших или больших разделов Классы состояния, добавленные fullpage.js Пассивная загрузка элементов мультимедиа Автовоспроизведение элементов мультимедиа Использование расширений Опции Методы Обратные вызовы Сообщение о проблемах Вклад в fullpage.js Журнал изменений Задачи сборки Ресурсы [Кто использует Введение
Мы будем рады любым предложениям, не только по поводу новых функций, но и по улучшению кода. Сделаем fullPage.js отличной библиотекой, которая облегчит жизнь людям!
Совместимость
fullPage.js полностью совместим и функционален в любом современном браузере, а также в некоторых старых, таких как Internet Explorer 8 и 9 или Opera 12. Он работает с браузерами, поддерживающими CSS3, и с теми, которые его не поддерживают, что делает его идеальным даже для старых браузеров. Также он обеспечивает тактильную поддержку для мобильных устройств, планшетов и компьютеров с сенсорным экраном.
Благодарим Browserstack за поддержку fullPage.js.
Использование
Как вы можете видеть на доступных примерах, необходимо включить:
Опционально, при использовании опции css3:false, вы можете добавить библиотеку jQuery UI, если хотите использовать другой эффект «easing» вместо тех, которые включены в библиотеку jQuery по умолчанию (linear и swing) или включены в fullPage.js по умолчанию (easeInOutCubic).
Установка с помощью bower или npm
Опционально вы можете установить fullPage.js с помощью bower или npm, если предпочитаете:
Терминал:
// С помощью bower
bower install fullpage.js
// С помощью npm
npm install fullpage.js
Включение файлов:
<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` и вы хотите использовать другой эффект `easing` вместо «linear», «swing» или «easeInOutCubic». -->
<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="jquery.fullPage.js"></script>
Необязательное использование CDN Если вы предпочитаете, вы можете использовать CDN (Content Delivery Network или Сеть доставки контента) для загрузки файлов fullPage.js. FullPage.js доступен в CDNJS: https://cdnjs.com/libraries/fullPage.js
Необходимая структура HTML
Документ HTML должен начинаться с обязательного HTML DOCTYPE на первой строке вашего файла HTML. В противном случае у вас могут возникнуть проблемы с размером разделов и слайдов. Все доступные примеры здесь используют HTML 5 <!DOCTYPE html>.
Каждая секция должна быть определена с использованием класса section. Секция по умолчанию будет первой, которая будет рассматриваться как начальная страница.
Секции должны содержаться в другом элементе (<div id="fullpage"> в этом случае). Элемент контейнера не может быть элементом body страницы.
<div id="fullpage">
<div class="section">Секция 1</div>
<div class="section">Секция 2</div>
<div class="section">Секция 3</div>
<div class="section">Секция 4</div>
</div>
Если вы хотите определить секцию начала, отличную от первой секции или первого слайда секции, просто добавьте класс active в секцию или слайд, который вы хотите сделать видимым изначально.
<div **Mi sección de inicio**
Можно использовать класс `slide` для создания горизонтальных слайдов внутри секции:
```html
<div class="section">
<div class="slide"> Слайд 1 </div>
<div class="slide"> Слайд 2 </div>
<div class="slide"> Слайд 3 </div>
<div class="slide"> Слайд 4 </div>
</div>
Полностью рабочий пример структуры HTML можно увидеть в примере demostraciónPage.html.
Всё, что вам нужно сделать, это вызвать fullPage.js внутри функции $(document).ready.
$(document).ready(function() {
$('#fullpage').fullpage();
});
Более сложная инициализация со всеми определёнными опциями будет выглядеть так:
$(document).ready(function() {
$('#fullpage').fullpage({
// Навигация
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
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,
// Доступность
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'},
// Пользовательские селекторы
sectionSelector: '.section',
slideSelector: '.slide',
// События
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 в каждой секции), то вы также можете использовать ссылки привязки для перехода к определённой секции или слайду.
Это будет примером ссылки с привязкой: http://alvarotrigo.com/fullPage/#secondPage/2 (это URL, который вы увидите в URL-адресе, если перейдёте к этой секции/слайду вручную)
Обратите внимание, что последняя часть URL заканчивается на: #secondPage/2
Имея следующую инициализацию:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors:['firstPage', 'secondPage', 'thirdPage']
});
});
Ссылка привязки в конце URL #secondPage/2 определяет секцию и слайд назначения соответственно. В предыдущем URL секция назначения будет той, которая... Определяется ссылкой привязки secondPage и слайд будет вторым в этой секции, потому что мы используем индекс 2 для него. (Первый слайд секции будет иметь индекс 0, потому что технически он будет обрабатываться как секция).
Мы могли бы использовать пользовательскую ссылку привязки для слайда вместо его индекса, если бы использовали атрибут data-anchor в структуре HTML:
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
В этом случае URL, которую мы будем использовать, будет #secondPage/slide3, что эквивалентно нашей предыдущей URL #secondPage/2.
Обратите внимание, что ссылки привязки в секции также могут быть определены таким же образом, то есть с использованием атрибута data-anchor, если только опция anchors не была определена при запуске fullPage.js.
Будьте осторожны! Атрибуты data-anchor не могут иметь такое же значение, как любая другая метка ID на странице. (или name для Internet Explorer)
демонстрация fullPage.js предоставляет способ снять ограничение полноэкранного режима для секций и слайдов. Можно создавать секции с высотой меньше или больше размера окна браузера. Это особенно полезно для нижних колонтитулов.
Чтобы создать этот тип секций, просто используйте класс fp-auto-height в секции, где вы хотите его применить. Таким образом, fullPage.js будет регулировать размер в соответствии с содержимым этой секции или слайда.
<div class="section">Полный экран</div>
<div class="section fp-auto-height">Автоматический рост</div>
fullPage.js может снять ограничение на полноэкранный режим только в режиме responsive, если вы этого хотите. Таким образом, секция станет секцией автоматического размера, когда fullPage.js перейдёт в режим responsive. (Используя опцию responsiveWidth или responsiveHeight)
Fullpage.js добавляет несколько классов в разные элементы для отражения состояния веб-страницы:
демонстрация fullPage.js обеспечивает пассивный способ загрузки изображений, видео и аудио, чтобы эти элементы не замедляли загрузку веб-страницы и не тратили ненужные ресурсы передачи. Когда используется пассивная загрузка элементов, они будут загружаться только тогда, когда они войдут в видимую часть окна. Для активации этой функции достаточно изменить атрибут src на data-src, как показано ниже:
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
Если вы уже использовали другую библиотеку пассивной загрузки (lazy loading), которая использует атрибут data-src, вы можете отключить её. Этикетки data-anchor не могут иметь такое же значение, как любая другая метка ID на странице. (или name для Internet Explorer).
Теперь якорные ссылки также можно определить непосредственно в структуре HTML, используя атрибут data-anchor.
lockAnchors: (по умолчанию false) определяет, будут ли якорные ссылки в URL влиять на fullPage.js. Вы можете использовать якоря внутренне для своих собственных функций или внутри обратных вызовов, но они не будут иметь никакого влияния на перемещение веб-страницы. Полезно, когда вы хотите объединить fullPage.js с другими плагинами, которые используют якорные ссылки в URL.
easing: (по умолчанию easeInOutCubic) определяет тип перехода, который будет использоваться fullPage.js для вертикального и горизонтального перемещения страницы при использовании css3:false или если браузер не поддерживает анимацию CSS 3. Требуется файл vendors/jquery.easings.min.js или jQuery UI для использования некоторых из их переходов. Другие библиотеки могут быть использованы, если это необходимо.
easingcss3: (по умолчанию ease) определяет эффект перехода, который будет использовать fullPage.js при использовании css3:true. Вы можете использовать предопределённые эффекты (например, linear, ease-out...) или создать свои собственные эффекты, используя функцию cubic-bezier. Возможно, вы захотите взглянуть на Matthew Lein CSS Easing Animation Tool для этого.
loopTop: (по умолчанию false) определяет, будет ли прокрутка вверх, находясь на первой секции, перемещать вас к последней или нет.
loopBottom: (по умолчанию false) определяет, будет ли прокрутка вниз, находясь на последней секции, перемещать вас к первой или нет.
loopHorizontal: (по умолчанию true) определяет, вернутся ли горизонтальные слайды к первому или последнему слайду, когда дойдут до последнего или первого соответственно.
css3: (по умолчанию true). Определяет, будет ли fullPage.js использовать JavaScript или анимацию CSS3 для выполнения переходов между секциями и слайдами. Полезно для улучшения производительности на планшетах и мобильных устройствах, а также в браузерах с поддержкой CSS 3. Если эта опция установлена в true, а браузер не поддерживает анимации CSS 3, fullPage.js автоматически вернёт её в false, чтобы использовать анимацию JavaScript.
autoScrolling: (по умолчанию true) определяет, использовать ли «автоматическое» или «прыжковое» перемещение или использовать традиционное перемещение любой страницы. Также влияет на способ, которым секции подстраиваются под окно на планшетах и мобильных устройствах.
fitToSection: (по умолчанию true) определяет, «вписывать» ли секции в браузере или нет. Это имеет смысл, когда используется autoScrolling:false или scrollBar:false, или в режиме адаптивности. Когда используется true, текущая секция будет перемещаться по экрану, пока содержимое не достигнет окна. В противном случае пользователь сможет свободно перемещаться и останавливаться посередине двух секций.
fitToSectionDelay: (по умолчанию 1000). Если fitToSection активен, эта опция определяет время в миллисекундах, которое fullpage.js будет ждать после того, как пользователь перестанет перемещаться, прежде чем секция впишется в окно.
scrollBar: (по умолчанию false) определяет, следует ли использовать полосу прокрутки браузера или нет. Если она используется, функциональность autoScrolling (автоматического или «прыжкового» перемещения) будет работать так, как ожидается. Пользователь также сможет свободно перемещаться по странице с помощью полосы навигации, и fullpage.js впишет секцию, когда перемещение прекратится, при условии использования fitToSection.
paddingTop: (по умолчанию 0) определяет верхний «padding» для каждой секции с числовым значением и его единицей измерения (paddingTop: '10px', paddingTop: '10em'...). Полезно при использовании фиксированных заголовков (fixed).
paddingBottom: (по умолчанию 0) определяет нижний «padding» для каждой секции с числовым значением и его единицей измерения (paddingBottom: '10px', paddingBottom: '10em'...), paddingBottom: '10em'...) Полезно при использовании фиксированной (fixed) нижней части страницы.
fixedElements: (по умолчанию null) Определяет, какие элементы будут извлечены из структуры fullPage.js. Это необходимо при использовании опции css3 для их фиксации (fixed). Требуется строка с селектором jQuery для указанных элементов. (Например: fixedElements: '#element1, .element2').
normalScrollElements: (по умолчанию null) Если вы хотите избежать автоматического перемещения (или перемещения прыжками), когда происходит прокрутка над определёнными элементами, это опция для использования. (Полезно для карт, div с прокруткой и т. д.). Требуется строка с селектором jQuery для указанных элементов.(Например: normalScrollElements: '#element1, .element2'). Эту опцию не следует применять непосредственно к самим разделам или элементам внутри них.
normalScrollElementTouchThreshold: (по умолчанию 5) Определяет предел количества прыжков вверх по дереву узлов, которые Fullpage.js будет рассматривать, чтобы проверить соответствие normalScrollElements. (Например: normalScrollElementTouchThreshold: 3).
bigSectionsDestination: (по умолчанию null) Определяет направление перехода к разделу больше окна браузера. По умолчанию fullPage.js переместится в верхнюю часть раздела, если вы переходите из раздела выше, и в нижнюю часть, если вы переходите из нижнего раздела. Возможные значения для этой опции: top, bottom, null.
keyboardScrolling: (по умолчанию true) Определяет, можно ли перемещаться по содержимому с помощью клавиатуры.
touchSensitivity: (по умолчанию 5) Определяет определённый процент окна браузера, начиная с которого fullpage.js регистрирует вертикальное перемещение.
continuousVertical: (по умолчанию false) Определяет, будет ли прокрутка вниз в последнем разделе вызывать перемещение вниз к первому разделу, и будет ли прокрутка вверх в первом разделе вызывать перемещение вверх к последнему разделу. Не совместим с loopTop, loopBottom и любой полосой прокрутки (используя scrollBar:true или autoScrolling:false).
continuousHorizontal: (по умолчанию false) Расширение fullpage.js. Определяет, приведёт ли перемещение вправо в последней диапозитиве к перемещению вправо к первой диапозитиву, и приведёт ли перемещение влево в первой диапозитиве к перемещению влево к последней диапозитиву. Не совместим с loopHorizontal.
scrollHorizontally: (по умолчанию false) Расширение fullpage.js. Определяет, произойдёт ли горизонтальное перемещение между слайдами раздела при использовании колеса мыши или трекпада. Идеально подходит для рассказывания историй.
interlockedSlides: (по умолчанию false) Расширение fullpage.js. Определяет, заставит ли горизонтальное перемещение одного раздела со слайдами перемещение других слайдов в других разделах в том же направлении. Возможные значения: true, false или массив с разделами, которые будут связаны. Например, [1,3,5], начиная с 1.
dragAndMove: (по умолчанию false) Расширение fullpage.js. Включает или отключает перемещение разделов и слайдов с помощью мыши или пальцев на сенсорных устройствах. Возможные значения для этого параметра: false, true, fingersonly. Опция fingersonly включает эту функцию только для перемещения пальцами на сенсорных устройствах.
offsetSections: (по умолчанию false) Расширение fullpage.js. Предоставляет способ использовать разделы, которые не занимают весь экран, а определённый процент от него. Идеально для отображения... Посетители, которые имеют больше контента на странице, могут видеть часть следующей или предыдущей секции.
Чтобы определить процентное соотношение секции, необходимо использовать атрибут data-percentage. Центрирование секции в окне можно определить с помощью булевого значения (true или false) в атрибуте data-centered. (По умолчанию будет true, если не указано иное). Например:
<div class="section" data-percentage="80" data-centered="true">
resetSliders: (по умолчанию false). Расширение fullpage.js. Определяет, когда перезапускать карусель слайдов секции так, чтобы он показывал первый слайд при возвращении к этой секции.
fadingEffect: (по умолчанию false). Расширение fullpage.js. Определяет, когда использовать эффект затухания (fading) вместо обычного эффекта перемещения fullPage.js. Возможные значения: true, false, sections, slides. Таким образом, его можно применять только вертикально или горизонтально, либо одновременно.
animateAnchor: (по умолчанию true) Определяет, будет ли страница перемещаться в целевую секцию при загрузке страницы с использованием привязки (#), или она загрузится непосредственно в эту секцию.
recordHistory: (по умолчанию true) Определяет, будут ли состояния страницы сохраняться в истории браузера. Если эта опция установлена в true, каждая секция/слайд страницы будет действовать как новая страница, и кнопки «предыдущая страница» или «следующая страница» браузера будут перемещать секции/слайды страницы до достижения предыдущего или следующего состояния соответственно. Если эта опция установлена в false, URL будет продолжать меняться с соответствующими привязками, но они не будут иметь никакого эффекта в истории браузера. Эта опция автоматически устанавливается в false при использовании опции autoScrolling:false.
menu: (по умолчанию false) Можно использовать селектор для определения меню страницы, на которое ссылаются секции. В этом случае вертикальное перемещение между секциями активирует соответствующий элемент меню, используя класс active. Эта опция не создаст меню, а просто добавит класс active к элементу меню с соответствующим привязкой к секции. Для связывания элементов меню с секциями требуется использование атрибута 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>
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
Примечание: меню должно быть расположено вне контейнера fullpage, чтобы избежать проблем при использовании css3:true. В противном случае меню будет автоматически перемещено за пределы структуры fullPage.js и добавлено в body.
navigation: (по умолчанию false) Если установлено в true, будет отображаться боковая навигация с кругами, указывающими на секции страницы.
navigationPosition: (по умолчанию none) Может быть установлен в left или right и определяет позицию, которую примет навигация (если она используется).
navigationTooltips: (по умолчанию []) Определяет текст для каждого круга навигации. Например: navigationTooltips: ['firstSlide', 'secondSlide']. Также можно определить эти тексты, используя атрибут data-tooltip в каждой секции, если это предпочтительнее.
showActiveTooltip: (по умолчанию false) Определяет, показывать ли активный всплывающий текст. Моcтрар siempre видибле эль texto для эль циркуло де ла навенгасьон куэ се энтэнде активo эн эсэ моменто.
slidesNavigation: (по умолчанию false) Если определяется как true, покажет навигацию для горизонтальных слайдов страницы.
slidesNavPosition: (по умолчанию bottom) Определяет позицию, которую займёт навигация для горизонтальных слайдов страницы. Принимает значения top и bottom. Возможно, вы захотите изменить нижнее или верхнее расстояние с помощью стилей CSS, а также цвет элементов.
scrollOverflow: (по умолчанию false) (несовместимо с IE 8) Определяет, создавать ли полосу прокрутки для разделов/слайдов, где содержимое больше высоты окна браузера. Когда определяется как true, содержимое раздела/слайда будет помещено fullPage.js в контейнер. В этих случаях рассмотрите возможность использования делегирования или событий JavaScript в обратном вызове afterRender.
Когда используется true, эта опция требует использования внешней библиотеки scrolloverflow.min.js и должна быть добавлена перед fullPage.js. Например:
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Чтобы предотвратить создание полосы прокрутки fullPage.js в определённых разделах или слайдах, используйте класс fp-noscroll. Например: <div class="section fp-noscroll">
scrollOverflowReset: (по умолчанию false) Расширение fullpage.js. Когда определяется как true, fullPage.js переместит содержимое секции или слайда вверх, когда пользователь покинет секцию или слайд и перейдёт к другой вертикальной секции. Таким образом, когда вы достигнете секции, которая использует полосу прокрутки, всегда будет отображаться начало её содержимого.
scrollOverflowOptions: Когда используется опция scrollOverflow:true, fullPage.js будет использовать модифицированную версию библиотеки iScroll.js. Вы можете настроить поведение этого компонента, предоставив fullPage.js нужные вам опции iScroll, используя эту опцию. Смотрите документацию iScroll для получения дополнительной информации.
sectionSelector: (по умолчанию .section) Определяет селектор jQuery, который fullPage.js будет использовать для определения того, что является секцией. Может потребоваться изменить его, чтобы избежать проблем с другими библиотеками, которые используют тот же селектор, что и fullPage.js по умолчанию.
slideSelector: (по умолчанию .slide) Определяет селектор jQuery, который fullPage.js будет использовать для определения того, что является слайдом. Может потребоваться изменить его, чтобы избежать проблем с другими библиотеками, которые используют тот же селектор, что и fullPage.js по умолчанию.
responsiveWidth: (по умолчанию 0) Будет использовать перемещение по умолчанию любой другой страницы, когда окно имеет значение привязки меньше определённого в этой опции. Класс fp-resposive будет добавлен к элементу body страницы, если вы хотите использовать этот селектор в таблице стилей CSS для определения, когда fullpage.js перешёл в режим адаптивного отображения. Например, если определено как 900, когда ширина окна браузера меньше 900 пикселей, перемещение fullpage.js будет действовать как на обычной странице.
responsiveHeight: (по умолчанию 0) Будет использовать перемещение по умолчанию любой другой страницы, когда окно имеет высоту меньше определённой в этой опции. Класс fp-resposive будет добавлен к элементу body страницы, если вы хотите использовать этот селектор в таблице стилей CSS для определения, когда fullpage.js перешёл в режим адаптивного отображения. Например, если определено как 900, когда высота окна браузера меньше 900 пикселей, перемещение fullpage.js будет действовать как на обычной странице.
responsiveSlides: (по умолчанию false) Расширение fullpage.js
Когда для параметра задано значение true, горизонтальные слайды будут преобразованы в вертикальные секции при активации адаптивного режима (используя параметры responsiveWith или responsiveHeight, описанные выше).
parallax: (по умолчанию false) расширение fullpage.js. Определяет, использовать ли фоны секций и слайдов с эффектом параллакса или нет. Подробнее об опции parallax можно прочитать здесь.
parallaxOptions: (по умолчанию: { type: 'reveal', percentage: 62, property: 'translate'}). Позволяет настроить параметры эффекта параллакса при использовании опции parallax:true. Подробнее об опции parallax здесь.
lazyLoading: (по умолчанию true) пассивная загрузка включена по умолчанию, что означает, что она будет пассивно загружать любой мультимедийный элемент, содержащий атрибут data-src, как описано в пассивной загрузке мультимедийных элементов. Если вы хотите использовать другую библиотеку пассивной загрузки, вы можете отключить эту функцию, установив значение false.
Можно увидеть их в действии здесь:
[демонстрация] перемещает страницу вверх на одну секцию:
$.fn.fullpage.moveSectionUp();
[демонстрация] перемещает страницу вниз на одну секцию:
$.fn.fullpage.moveSectionDown();
[демонстрация] Перемещает страницу к указанной секции или слайду. Первый слайд в секции, который по умолчанию является видимым, будет иметь индекс 0.
/* Перемещение страницы к секции с якорем `firstSlide` и ко второму слайду */
$.fn.fullpage.moveTo('firstSlide', 2);
// То же самое, что и это
$.fn.fullpage.moveTo(3, 0);
// Что было бы то же самое, что сделать это
$.fn.fullpage.moveTo(3);
[демонстрация]
То же, что и moveTo (https://github.com/alvarotrigo/fullPage.js/blob/master/README_SPANISH.md#movetosection-slide), но в этом случае перемещение происходит без анимации. Прямой переход к месту назначения без перехода.
/* Перемещение страницы к секции с якорем `firstSlide` и ко второму слайду */
$.fn.fullpage.silentMoveTo('firstSlide', 2);
[демонстрация] Перемещает карусель слайдов текущей секции к следующему слайду.
$.fn.fullpage.moveSlideRight();
[демонстрация] Перемещает карусель слайдов текущей секции к предыдущему слайду.
$.fn.fullpage.moveSlideLeft();
[демонстрация] Позволяет определить конфигурацию опции autoScrolling после инициализации. Определяет, следует ли использовать «автоматическое» или «прыжковое» перемещение или использовать традиционное перемещение любой страницы.
$.fn.fullpage.setAutoScrolling(false);
[демонстрация] Определяет значение для опции fitToSection, определяя, следует ли подогнать ближайшую секцию к экрану или нет.
$.fn.fullpage.setFitToSection(false);
[демонстрация] Перемещает страницу к активной ближайшей секции, подгоняя её. disparado después de que fullPage.js cambie de su estado normal a "responsive" o viceversa.
Параметры:
isResponsive: boolean, определяет, входит (true) или выходит (false) из режима «responsive» в нормальный режим.Пример:
$('#fullpage').fullpage({
afterResponsive: function(isResponsive){
alert("Es responsive: " + isResponsive);
}
});
anchorLink, index, slideAnchor, slideIndex)Будет запущен после загрузки слайда секции, после того как перемещение закончилось.
Параметры:
anchorLink: ссылка привязки соответствующей секции.index: индекс секции. Начинается с 1.slideAnchor: ссылка привязки соответствующего слайда, который только что загрузился (если используется ссылка привязки).slideIndex: индекс загруженного слайда. Начинается с 1 (начальный слайд не считается слайдом, а считается секцией).Если для слайдов не определены ссылки привязки, можно использовать параметр slideIndex.
Пример:
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
var loadedSlide = $(this);
//первая диапозитива второй секции
if(anchorLink == 'secondPage' && slideIndex == 1){
alert("Первая диапозитива загружена");
}
//вторая диапозитива второй секции (предполагая, что #secondSlide является
//ссылкой привязки второй диапозитивы)
if(index == 2 && slideIndex == 'secondSlide'){
alert("Вторая диапозитива загружена");
}
}
});
anchorLink, index, slideIndex, direction, nextSlideIndex)Запускается, когда пользователь покидает текущий слайд и переходит к другому во время перехода к новой диапозитиве.
Возвращает false, если движение отменяется до его начала.
Параметры:
anchorLink: ссылка привязки к секции.index: индекс секции. Начинается с 1.slideIndex: индекс слайда. Начинается с 0.
direction: принимает значения right или left в зависимости от направления перемещения.nextSlideIndex: индекс целевого слайда. Начинается с 0.
Пример:
$('#fullpage').fullpage({
onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
var leavingSlide = $(this);
//покидая первую диапозитиву второй секции и двигаясь вправо
if(index == 2 && slideIndex == 0 && direction == 'right'){
alert("Покидаем диапозитиву 1!!");
}
//покидая третью диапозитиву второй секции и двигаясь влево
if(index == 2 && slideIndex == 2 && direction == 'left'){
alert("Идём к диапозитиве 2! ");
}
}
});
Можно отменить перемещение, вернув false в обратном вызове onSlideLeave. Точно так же, как при использовании onLeave.
Пожалуйста, посмотрите Contributing to fullPage.js. Можешь найти более длинный список здесь.
Буду благодарен за любое пожертвование!
Кредиты в комментариях в файлах JavaScript и CSS должны оставаться неизменными. (даже после минификации и объединения файлов)
(The MIT License)
Copyright (c) 2013 Альваро Триго <alvaro@alvarotrigo.com>
Предоставляется право, бесплатно, любому лицу, получившему копию этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), использовать Программное обеспечение без ограничений, включая без ограничения права на использование, копирование, изменение, объединение, публикацию, распространение, сублицензирование и/или продажу копий Программного обеспечения, а также разрешать лицам, которым предоставляется Программное обеспечение, делать то же самое при соблюдении следующих условий:
Предыдущее уведомление об авторских правах и это уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ КОММЕРЧЕСКОЙ ЦЕННОСТИ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНОЙ ЦЕЛИ И ОТСУТСТВИЯ НАРУШЕНИЙ. НИ В ОДНОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ АВТОРСКИХ ПРАВ НЕ БУДУТ НЕСТИ ОТВЕТСТВЕННОСТЬ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УЩЕРБ ИЛИ ДРУГУЮ ОТВЕТСТВЕННОСТЬ, ВОЗНИКШУЮ ИЗ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ЛЮБЫМ ДРУГИМ ДЕЙСТВИЕМ В ОТНОШЕНИИ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )