# fullPage.js ![предварительный просмотр](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png) ![совместимость](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/compatible.gif?v=2)

English | Español | Pусский | 中文 | 한국어

--- ![Версия fullPage.js](http://img.shields.io/badge/fullPage.js-v3.0.2-brightgreen.svg) [![Лицензия](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html) [![Перечисление на PayPal](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/alvarotrigo/9.95) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/fullpage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/fullpage.js)    **|**   *7Кб в формате gzip*   **|**   *Создано [@imac2](https://twitter.com/imac2)* - [Живое демо](http://alvarotrigo.com/fullPage/) - [Тема Wordpress](http://alvarotrigo.com/fullPage/utils/wordpress.html) - [Расширения fullpage.js](http://alvarotrigo.com/fullPage/extensions/) - [Часто задаваемые вопросы](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions) --- Простая и удобная в использовании библиотека для создания веб-сайтов с полноэкранной прокруткой (также известных, как одностраничные сайты). Она позволяет создавать веб-сайты с полноэкранной прокруткой, а также добавлять горизонтальные ползунки для разделов сайта. - [Введение](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Введение) - [Совместимость](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Совместимость) - [Лицензия](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Лицензия) - [Использование](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Использование) - [Создание ссылок на разделы или слайды](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Создание-ссылок-на-разделы-или-слайды) - [Создание больших и малых разделов](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Создание-больших-и-малых-разделов) - [Классы состояний, добавляемые fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Классы-состояний-добавляемые-fullpagejs) - [Отложенная загрузка](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Отложенная-загрузка) - [Автопроигрывание встроенного медиа](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Автопроигрываниеприостановка-встроенного-медиа) - [Использование расширений](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Использование-расширений) - [Опции](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Опции) - [Функции](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Функции) - [Обратные вызовы](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Обратные-вызовы) - [Сообщение о проблеме](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Сообщение-о-проблемах) - [Внесение предложений для fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Внесение-предложений-для-fullpagejs) - [Change Log](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#changelog) - [Задачи по построению](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Задачи-по-построению) - [Ресурсы](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Ресурсы) - [Кто пользуется fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Кто-пользуется-fullpagejs) - [Денежные переводы](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian/#Денежные-переводы) ## Введение Более чем приветствуются ваши предложения, касающиеся не только функций и возможностей, но и улучшения стиля кодирования. Давайте вместе создадим замечательную библиотеку, чтобы облегчить жизнь пользователям! ## Совместимость fullPage.js полностью функционирует во всех современных браузерах, также, как и в некоторых устаревших, таких как Internet Explorer 9, Opera 12 и т.д. Работает в браузерах, имеющих и не имеющих поддержку CSS3, что обеспечивает идеальную совместимость с устаревшими браузерами. Обеспечивает поддержку сенсорного управления для мобильных телефонов, планшетов и компьютеров с сенсорным экраном. Выражаем особую благодарность [Browserstack](http://www.browserstack.com/) за поддержку fullpage.js. ## Лицензия ### Коммерческая лицензия Если вы хотите использовать fullPage для разработки коммерческих сайтов, тем, проектов и приложений, то вам подойдёт коммерческая лицензия. С такой опцией ваш исходный код будет закрытым. Это значит, что вам не придётся менять весь исходный код вашего приложения на лицензию с открытым исходным кодом. [[Приобретите Коммерческую лицензию Fullpage здесь]](https://alvarotrigo.com/fullPage/pricing/) ### Лицензия с открытым исходным кодом Если вы создаёте приложение с открытым исходным кодом по лицензии, совместимой с [Лицензией GNU GPL v3](https://www.gnu.org/licenses/gpl-3.0.html), вы можете использовать fullPage на условиях GPLv3. **Сведения об авторе в JavaScript и файлах CSS должны оставаться без изменений** (даже после комбинации или минификации) [Прочесть больше о лицензии fullPage](https://alvarotrigo.com/fullPage/pricing/). ## Использование Как вы можете увидеть в файлах-примерах, вам необходимо будет включить: - Файл JavaScript `fullpage.js` (или его минифицированную версию `fullpage.min.js`) - Файл css `fullpage.css` **Опционально**, при использовании `css3:false` вы можете добавить [библиотеку jQuery UI](http://jqueryui.com/), в случае если вы хотите использовать другие анимационные эффекты, в дополнение к включённым в библиотеку (`easeInOutCubic` ). ### Установка bower или npm **Опционально**, вы можете установить fullPage.js с bower или npm согласно вашим предпочтениям: Введите: ```shell // С bower bower install fullpage.js // С npm npm install fullpage.js ``` ### Включение файлов: ```html ``` ### Опциональное использование CDN Если вы предпочитаете использовать CDN для загрузки необходимых файлов, fullPage.js есть в CDNJS: https://cdnjs.com/libraries/fullPage.js ### Требуемая HTML-структура Начиная свой документ HTML, обязательно введите [HTML DOCTYPE declaration](http://www.corelangs.com/html/introduction/doctype.html) в первой строке вашего HTML-кода. Иначе у вас могут возникнуть проблемы с вертикальным размером разделов. В приведённых примерах используется тип документа HTML 5 ``. Каждый раздел будет определён элементом, содержащим класс `section`. Активный раздел по умолчанию будет являться первым разделом, то есть домашней страницей. Разделы должны помещаться в обёрточный код (в данном случае - `
`). Обёрточный код не может быть элементом `body`. ```html
Определённый раздел
Определённый раздел
Определённый раздел
Определённый раздел
``` Если вы хотите определить другую точку входа (не первый раздел или первый слайд раздела), просто добавьте класс `active` к разделу и слайду, которые вы хотите загружать в первую очередь. ```html
Определённый раздел
``` Чтобы создать горизонтальный ползунок в разделе, каждый слайд должен определяться по умолчанию с помощью элемента, содержащего класс `slide`: ```html
Слайд 1
Слайд 2
Слайд 3
Слайд 4
```` Вы можете посмотреть на полностью работоспособный пример HTML-структуры здесь: [файл `demoPage.html`](https://github.com/alvarotrigo/fullPage.js/blob/master/examples/demoPage.html). ### Инициализация #### Инициализация с Vanilla Javascript Всё, что вам нужно сделать, - это указать fullPage.js перед закрывающим тегом ``. ```javascript new fullpage('#fullpage', { //options here autoScrolling:true, scrollHorizontally: true }); //methods fullpage_api.setAllowScrolling(false); ``` #### Инициализация с jQuery Если хотите, можете также использовать fullpage.js в качестве плагина jQuery! ```javascript $(document).ready(function() { $('#fullpage').fullpage({ //options here autoScrolling:true, scrollHorizontally: true }); //methods $.fn.fullpage.setAllowScrolling(false); }); ``` Функции и методы можно делать так же, как и с jQuery, как в [fullPage.js v2.X](https://github.com/alvarotrigo/fullPage.js/tree/2.9.7). #### Пример Vanilla JS со всеми опциями Более сложная инициализация с установкой всех параметров может выглядеть так: ```javascript 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', //Скроллинг 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', lazyLoading: true, //события onLeave: function(origin, destination, 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){} }); ``` ### Создание ссылок на разделы или слайды Если вы используете fullPage.js с ссылками привязки для разделов (пользуясь опцией `anchors` или атрибутом `data-anchor` в каждом разделе), то вы сможете использовать ссылки привязки также для перемещения напрямую к определённому слайду в разделе. Вот пример ссылки с привязкой: http://alvarotrigo.com/fullPage/#secondPage/2 (это URL, который вы увидите при доступе к данному разделу/слайду вручную) Обратите внимание на то, что последняя часть URL заканчивается элементом `#secondPage/2`. При следующей инициализации: ```javascript new fullpage('#fullpage', { anchors:['firstPage', 'secondPage', 'thirdPage'] }); ``` Привязка `#secondPage/2` в конце URL определяет заданный раздел и слайд соответственно. В предыдущем URL заданным разделом будет являться раздел, определённый привязкой `secondPage`, а заданным слайдом будет второй слайд, так как для этого мы и использовали индекс `2`. (первый слайд в разделе имеет индекс 0, так как технически это раздел). Мы могли бы использовать свою привязку для слайда, а не его индекс, если бы мы использовали атрибут `data-anchor` в HTML-разметке следующим образом: ```html
Слайд 1
Слайд 2
Слайд 3
Слайд 4
``` В данном случае мы бы использовали URL `#secondPage/slide3`, являющийся эквивалентным предыдущему - `#secondPage/2`. Обратите внимание, что привязки к разделам могут создаваться точно также, с помощью атрибута `data-anchor`, если не предусмотрен ряд каких-либо привязок - `anchors`. **Внимание!** обозначения `data-anchor` не могут иметь значение, совпадающее с каким-либо элементом ID на сайте (или элементом NAME - для IE). ### Создание больших и малых разделов [Демо](http://codepen.io/alvarotrigo/pen/BKjRYm) fullPage.js обеспечивает возможность убрать ограничение по высоте разделов и слайдов. Есть возможность создавать разделы, высота которых больше или меньше окна просмотра. Эта функция идеальна при использовании колонтитулов. Важно понимать, что нет смысла в применении данной функции ко всем вашим разделам. При наличии более чем одного раздела при первоначальной загрузке сайта fullPage.js не сможет сделать прокрутку, чтобы увидеть следующий раздел, так как он уже и так будет находиться в окне просмотра. Для создания меньших разделов просто используйте класс `fp-auto-height` в разделе, к которому хотите применить эту функцию. Тогда высота будет определяться контентом вашего раздела/слайда. ```html
Полное окно просмотра
Автовысота
``` #### Разделы с подстройкой автовысоты [Демо](https://codepen.io/alvarotrigo/pen/WZmMgZ) Подстройка автовысоты может быть применена с помощью класса `fp-auto-height-responsive`. В таком случае разделы будут отображаться в полную высоту, пока не будет активирован режим подстройки. ### Классы состояний, добавляемые fullpage.js Fullpage.js добавляет различные классы к разным элементам, чтобы отслеживать статус сайта: - `active` добавляется к текущему отображаемому разделу и слайду. - `active` добавляется к текущему элементу меню (если используется опция `menu`). - Класс вида `fp-viewing-SECTION-SLIDE` добавляется к элементу `body`. (например: [`fp-viewing-secondPage-0`](http://alvarotrigo.com/fullPage/#secondPage)) Части `SECTION` и `SLIDE` будут являться привязками (или индексами, если привязки не предусмотрены) к текущему разделу и слайду. - `fp-responsive` добавляется к элементу `body` при входе в режим подстройки - `fp-enabled` добавляется к элементу `html`, когда fullpage.js активирован. (и удаляется при деактивации). - `fp-destroyed` добавляется к хранилищу fullpage.js при деактивации fullPage.js. ### Отложенная загрузка [Демо](http://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js обеспечивает возможность отложенной загрузки изображений, видео- и аудиоэлементов, чтобы они не замедляли загрузку вашего сайта и не тратили без необходимости трафик при передаче данных. При использовании отложенной загрузки все эти элементы будут загружаться только при открытии в окне конструирования. Всё, что вам нужно сделать для активации отложенной загрузки, - это изменить ваш атрибут `src` на `data-src`, как показано ниже: ``` ``` Если вы уже применяете другой способ для отложенной загрузки, который также использует `data-src`, вы можете отключить отложенную загрузку fullPage.js, установив опцию `lazyLoading: false`. ### Автопроигрывание/приостановка встроенного медиа **Примечание**: функция автопроигрывания может не работать на некоторых мобильных устройствах, в зависимости от их ОС и браузера (то есть, в [Safari в iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/), в версиях до 10.0). #### Проигрывание при загрузке раздела/слайда: При использовании атрибута `autoplay` для видео или аудио, или параметра `autoplay=1` для встроенных фреймов youtube, медиа будет проигрываться при загрузке страницы. Для проигрывания медиа при загрузке раздела/слайда, используйте `data-autoplay`. Например: ```html ``` #### Приостановка при покидании страницы Встроенные фреймы HTML5 `