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

Для работы с fullPage.js необходимо подключить CSS и JS библиотеки в проект. Обычно это делается через локальные файлы или CDN. Стандартный набор подключений выглядит следующим образом:

Важно: версию библиотеки следует выбирать в зависимости от поддержки нужных функций. Для последних проектов рекомендуется использовать версию 4.x, так как она включает новые методы и улучшенную оптимизацию.

Структура HTML для fullPage.js

Основной принцип работы fullPage.js заключается в разделении страницы на секции. Каждая секция — это отдельный экран, на который можно прокручиваться вертикально или горизонтально. Минимальная структура выглядит так:


    
Секция 1

    
Секция 2

    
Секция 3
  • id="fullpage" — контейнер для всех секций.
  • .section — класс, который обязательно используется для каждой вертикальной секции.
  • Для горизонтальных слайдов внутри секции используется класс .slide:

    
Слайд 1

    
Слайд 2

Инициализация fullPage.js

Инициализация происходит с помощью конструктора new fullpage() или вызова функции fullpage_api. Основной синтаксис:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c'],
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    scrollingSpeed: 700
});

Ключевые параметры:

  • autoScrolling – включает вертикальную прокрутку по секциям.
  • navigation – добавляет индикаторы навигации справа.
  • sectionsColor – задаёт фон каждой секции.
  • anchors – создаёт уникальные якоря для секций, позволяя использовать ссылки вида #firstPage.
  • scrollingSpeed – скорость анимации прокрутки в миллисекундах.

Настройка горизонтальных слайдов

Для секций с горизонтальными слайдами можно включить дополнительные параметры:

new fullpage('#fullpage', {
    controlArrows: true,
    slidesNavigation: true,
    slidesNavPosition: 'bottom'
});
  • controlArrows – отображает стрелки навигации для слайдов.
  • slidesNavigation – добавляет индикаторы для горизонтальных слайдов.
  • slidesNavPosition – позиция навигации (top или bottom).

Обработчики событий

fullPage.js предоставляет богатый набор событий, позволяющих управлять действиями при смене секций и слайдов:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log('Покидаем секцию: ', origin.index);
    },
    afterLoad: function(origin, destination, direction){
        console.log('Загружена секция: ', destination.index);
    },
    afterSlideLoad: function(section, origin, destination, direction){
        console.log('Слайд загружен: ', destination.index);
    }
});
  • onLeave(origin, destination, direction) – вызывается при выходе из секции.
  • afterLoad(origin, destination, direction) – срабатывает после загрузки новой секции.
  • afterSlideLoad(section, origin, destination, direction) – событие для горизонтальных слайдов.

Параметры origin и destination содержат объекты с информацией о секциях, включая их index и anchor.

Доступ к API fullPage.js

После инициализации создаётся объект fullpage_api, позволяющий программно управлять прокруткой и навигацией:

// Прокрутка к секции по индексу
fullpage_api.moveTo(2);

// Прокрутка к слайду
fullpage_api.moveSlideRight();

// Программная блокировка прокрутки
fullpage_api.setAllowScrolling(false);

Основные методы API:

  • moveTo(sectionIndex / anchor, slideIndex) – переход к указанной секции и слайду.
  • moveSectionUp() / moveSectionDown() – перемещение по вертикали.
  • moveSlideLeft() / moveSlideRight() – перемещение по горизонтали.
  • setAllowScrolling(boolean) – включение/отключение прокрутки.
  • setKeyboardScrolling(boolean, directions) – управление прокруткой с клавиатуры.

Дополнительные параметры при инициализации

fullPage.js позволяет гибко настраивать поведение секций и слайдов:

  • fitToSection – автоматическое подстраивание прокрутки под размер секции.
  • scrollOverflow – включает внутреннюю прокрутку для содержимого, превышающего высоту экрана.
  • lazyLoading – откладывает загрузку изображений до появления секции на экране.
  • responsiveWidth / responsiveHeight – отключает fullPage при заданных размерах экрана, полезно для мобильных устройств.
  • normalScrollElements – список селекторов, где обычная прокрутка должна работать независимо от fullPage.js.

Пример комплексной инициализации

new fullpage('#fullpage', {
    autoScrolling: true,
    fitToSection: true,
    navigation: true,
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    anchors: ['home', 'about', 'contact'],
    scrollingSpeed: 600,
    controlArrows: true,
    slidesNavigation: true,
    scrollOverflow: true,
    lazyLoading: true,
    onLeave: function(origin, destination, direction){
        console.log(`Секция ${origin.index} -> ${destination.index}`);
    },
    afterLoad: function(origin, destination, direction){
        console.log(`Загружена секция: ${destination.anchor}`);
    }
});

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

Оглавление