fullPage.js

предварительный просмотр совместимость

Доступно для Vue, React и Angular.

| Created by @imac2

Простая и удобная в использовании библиотека для создания веб-сайтов с полноэкранной прокруткой (также известных, как одностраничные сайты). Она позволяет создавать веб-сайты с полноэкранной прокруткой, а также добавлять горизонтальные ползунки для разделов сайта.

ВведениеВведение

Более чем приветствуются ваши предложения, касающиеся не только функций и возможностей, но и улучшения стиля кодирования. Давайте вместе создадим замечательную библиотеку, чтобы облегчить жизнь пользователям!

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

fullPage.js is fully functional on all modern browsers and with IE 11. If you need to support IE < 11 consider using fullPage.js v3. It also provides touch support for mobile phones, tablets and touch screen computers.

Выражаем особую благодарность Browserstack за поддержку fullpage.js.

ЛицензияЛицензия

Коммерческая лицензияКоммерческая лицензия

Если вы хотите использовать fullPage для разработки коммерческих сайтов, тем, проектов и приложений, то вам подойдёт коммерческая лицензия. С такой опцией ваш исходный код будет закрытым. Это значит, что вам не придётся менять весь исходный код вашего приложения на лицензию с открытым исходным кодом. [Приобретите Коммерческую лицензию Fullpage здесь]

Лицензия с открытым исходным кодомЛицензия с открытым исходным кодом

Если вы создаёте приложение с открытым исходным кодом по лицензии, совместимой с Лицензией GNU GPL v3, вы можете использовать fullPage на условиях GPLv3.

You will have to provide a prominent notice that fullPage.js is in use. Сведения об авторе в JavaScript и файлах CSS должны оставаться без изменений (даже после комбинации или минификации)

Прочесть больше о лицензии fullPage.

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

Как вы можете увидеть в файлах-примерах, вам необходимо будет включить:

Файл JavaScript fullpage.js (или его минифицированную версию fullpage.min.js)
Файл css fullpage.css

Опционально, при использовании css3:false вы можете добавить библиотеку jQuery UI, в случае если вы хотите использовать другие анимационные эффекты, в дополнение к включённым в библиотеку (easeInOutCubic ).

Установка bower или npmУстановка bower или npm

Опционально, вы можете установить fullPage.js с bower или npm согласно вашим предпочтениям:

Введите:

Копировать// С bower
bower install fullpage.js

// С npm
npm install fullpage.js

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

Копировать<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- Следующая строчка опциональна. Необходима лишь в случае, если вы используете опцию css3:false и хотите использовать другие анимационные эффекты, кроме "linear", "swing" или "easeInOutCubic". -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Using Webpack, Browserify or Require.js? Check how to use fullPage.js with module loaders.

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

Если вы предпочитаете использовать CDN для загрузки необходимых файлов, fullPage.js есть в CDNJS: https://cdnjs.com/libraries/fullPage.js

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

Начиная свой документ HTML, обязательно введите HTML DOCTYPE declaration в первой строке вашего HTML-кода. Иначе у вас могут возникнуть проблемы с вертикальным размером разделов. В приведённых примерах используется тип документа HTML 5 <!DOCTYPE html>.

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

Разделы должны помещаться в обёрточный код (в данном случае - <div id="fullpage">). Обёрточный код не может быть элементом body.

Копировать<div id="full page">
    <div class="section">Определённый раздел</div>
    <div class="section">Определённый раздел</div>
    <div class="section">Определённый раздел</div>
    <div class="section">Определённый раздел</div>
</div>

Если вы хотите определить другую точку входа (не первый раздел или первый слайд раздела), просто добавьте класс active к разделу и слайду, которые вы хотите загружать в первую очередь.

Копировать<div class="section active">Определённый раздел</div>

Чтобы создать горизонтальный ползунок в разделе, каждый слайд должен определяться по умолчанию с помощью элемента, содержащего класс slide:

Копировать<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-структуры здесь: файл simple.html.

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

Инициализация с Vanilla JavascriptИнициализация с Vanilla Javascript

Всё, что вам нужно сделать, - это указать fullPage.js перед закрывающим тегом </body>.

Копироватьnew fullpage('#fullpage', {
    //options here
    autoScrolling:true,
    scrollHorizontally: true
});

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

Если хотите, можете также использовать fullpage.js в качестве плагина jQuery!

Копировать$(document).ready(function() {
    $('#fullpage').fullpage({
        //options here
        autoScrolling:true,
        scrollHorizontally: true
    });

    // Example of how to use fullpage.js methods
    $.fn.fullpage.setAllowScrolling(false);
});

Пример Vanilla JS со всеми опциямиПример 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',

    // Скроллинг
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 600,
    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: true,
    scrollOverflowMacStyle: false,
    scrollOverflowReset: false,
    touchSensitivity: 15,
    bigSectionsDestination: null,

    // Доступ
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    // Дизайн
    controlArrows: true,
    controlArrowsHTML: [
        '<div class="fp-arrow"></div>', 
        '<div class="fp-arrow"></div>'
    ],
    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'},
    dropEffect: false,
    dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
    waterEffect: false,
    waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    // Настроить селекторы
    sectionSelector: '.section',
    slideSelector: '.slide',

    lazyLoading: true,
    lazyLoadThreshold: 0,
    observer: true,
    credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

    // Cобытия
    beforeLeave: function(origin, destination, direction, trigger){},
    onLeave: function(origin, destination, direction, trigger){},
    afterLoad: function(origin, destination, direction, trigger){},
    afterRender: function(){},
    afterResize: function(width, height){},
    afterReBuild: function(){},
    afterResponsive: function(isResponsive){},
    afterSlideLoad: function(section, origin, destination, direction, trigger){},
    onSlideLeave: function(section, origin, destination, direction, trigger){},
    onScrollOverflow: function(section, slide, position, direction){}
});

Создание ссылок на разделы или слайдыСоздание ссылок на разделы или слайды

Если вы используете fullPage.js с ссылками привязки для разделов (пользуясь опцией anchors или атрибутом data-anchor в каждом разделе), то вы сможете использовать ссылки привязки также для перемещения напрямую к определённому слайду в разделе.

Вот пример ссылки с привязкой: https://alvarotrigo.com/fullPage/#secondPage/2 (это URL, который вы увидите при доступе к данному разделу/слайду вручную) Обратите внимание на то, что последняя часть URL заканчивается элементом #secondPage/2.

При следующей инициализации:

Копироватьnew fullpage('#fullpage', {
    anchors:['firstPage', 'secondPage', 'thirdPage']
});

Привязка #secondPage/2 в конце URL определяет заданный раздел и слайд соответственно. В предыдущем URL заданным разделом будет являться раздел, определённый привязкой secondPage, а заданным слайдом будет второй слайд, так как для этого мы и использовали индекс 2. (первый слайд в разделе имеет индекс 0, так как технически это раздел).

Мы могли бы использовать свою привязку для слайда, а не его индекс, если бы мы использовали атрибут data-anchor в HTML-разметке следующим образом:

Копировать<div class="section">
    <div class="slide" data-anchor="slide1"> Слайд 1 </div>
    <div class="slide" data-anchor="slide2"> Слайд 2 </div>
    <div class="slide" data-anchor="slide3"> Слайд 3 </div>
    <div class="slide" data-anchor="slide4"> Слайд 4 </div>
</div>

В данном случае мы бы использовали URL #secondPage/slide3, являющийся эквивалентным предыдущему - #secondPage/2.

Обратите внимание, что привязки к разделам могут создаваться точно также, с помощью атрибута data-anchor, если не предусмотрен ряд каких-либо привязок - anchors.

Внимание! обозначения data-anchor не могут иметь значение, совпадающее с каким-либо элементом ID на сайте (или элементом NAME - для IE).

Создание больших и малых разделовСоздание больших и малых разделов

Демо fullPage.js обеспечивает возможность убрать ограничение по высоте разделов и слайдов. Есть возможность создавать разделы, высота которых больше или меньше окна просмотра. Эта функция идеальна при использовании колонтитулов. Важно понимать, что нет смысла в применении данной функции ко всем вашим разделам. При наличии более чем одного раздела при первоначальной загрузке сайта fullPage.js не сможет сделать прокрутку, чтобы увидеть следующий раздел, так как он уже и так будет находиться в окне просмотра.

Для создания меньших разделов просто используйте класс fp-auto-height в разделе, к которому хотите применить эту функцию. Тогда высота будет определяться контентом вашего раздела/слайда.

Копировать<div class="section">Полное окно просмотра</div>
<div class="section fp-auto-height">Автовысота</div>

Разделы с подстройкой автовысотыРазделы с подстройкой автовысоты

Демо Подстройка автовысоты может быть применена с помощью класса fp-auto-height-responsive. В таком случае разделы будут отображаться в полную высоту, пока не будет активирован режим подстройки.

Классы состояний, добавляемые fullpage.jsКлассы состояний, добавляемые fullpage.js

Fullpage.js добавляет различные классы к разным элементам, чтобы отслеживать статус сайта:

active добавляется к текущему отображаемому разделу и слайду.
active добавляется к текущему элементу меню (если используется опция menu).
Класс вида fp-viewing-SECTION-SLIDE добавляется к элементу body. (например: fp-viewing-secondPage-0) Части SECTION и SLIDE будут являться привязками (или индексами, если привязки не предусмотрены) к текущему разделу и слайду.
fp-responsive добавляется к элементу body при входе в режим подстройки
fp-enabled добавляется к элементу html, когда fullpage.js активирован. (и удаляется при деактивации).
fp-destroyed добавляется к хранилищу fullpage.js при деактивации fullPage.js.

Отложенная загрузкаОтложенная загрузка

Демо fullPage.js обеспечивает возможность отложенной загрузки изображений, видео- и аудиоэлементов, чтобы они не замедляли загрузку вашего сайта и не тратили без необходимости трафик при передаче данных. При использовании отложенной загрузки все эти элементы будут загружаться только при открытии в окне конструирования. Всё, что вам нужно сделать для активации отложенной загрузки, - это изменить ваш атрибут src на data-src, как показано ниже:

Копировать<code><img data-src="image.png">
<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>

Если вы уже применяете другой способ для отложенной загрузки, который также использует data-src, вы можете отключить отложенную загрузку fullPage.js, установив опцию lazyLoading: false.

Автопроигрывание/приостановка встроенного медиаАвтопроигрывание/приостановка встроенного медиа

Демо Примечание: функция автопроигрывания может не работать на некоторых мобильных устройствах, в зависимости от их ОС и браузера (то есть, в Safari в iOS, в версиях до 10.0).

Проигрывание при загрузке раздела/слайда:Проигрывание при загрузке раздела/слайда:

При использовании атрибута autoplay для видео или аудио, или параметра autoplay=1 для встроенных фреймов youtube, медиа будет проигрываться при загрузке страницы. Для проигрывания медиа при загрузке раздела/слайда, используйте data-autoplay. Например:

Копировать<audio data-autoplay>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

Приостановка при покидании страницыПриостановка при покидании страницы

Встроенные фреймы HTML5 <video> / <audio> и Youtube автоматически останавливаются, когда вы покидаете раздел или слайд. Это можно отключить с помощью атрибута data-keepplaying. Например:

Копировать<audio data-keepplaying>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

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

fullpage.js предоставляет ряд расширений, которые вы можете использовать для улучшения его функций, предусмотренных по умолчанию. Все они представлены как опции fullpage.js.

Для расширений вам требуется использовать минифицированный файл fullpage.extensions.min.js, находящийся в папке dist, а не обычный файл fullPage.js (fullpage.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>

Ключ активации и ключ лицензии потребуются для каждого расширения. Узнайте более подробно об этом здесь.

Затем вы сможете использовать и настраивать их, как разъясняется в разделе опции.

ОпцииОпции

licenseKeylicenseKey

(по умолчанию null). Эта опция является обязательной. Если вы используете fullPage для проекта с закрытым исходным кодом, то вам следует воспользоваться лицензионным ключом, предоставляемым при приобретении коммерческой лицензии fullPage.если ваш проект открыт с открытым исходным кодом, свяжитесь со мной, чтобы получить лицензионный ключ.. Вы можете прочесть подробнее о лицензиях здесь и на веб-сайте. Пример:

Копироватьnew fullpage('#fullpage', {
    licenseKey: 'YOUR_KEY_HERE'
});