События для слайдов

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

События секций и слайдов

afterLoad

Срабатывает после полной загрузки секции. Сигнатура:

afterLoad: function(origin, destination, direction){}
  • origin – объект предыдущей секции (null для первой загрузки).
  • destination – объект текущей секции, содержащий информацию о её индексе и содержимом.
  • direction – направление скролла: "up" или "down".

Используется для:

  • Запуска анимаций при попадании на секцию.
  • Подгрузки динамического контента только при активации секции.

onLeave

Срабатывает перед уходом с секции на другую. Сигнатура:

onLeave: function(origin, destination, direction){}
  • Отличие от afterLoad в том, что событие происходит до смены секции.
  • Позволяет отменять или изменять анимации перед уходом.

Пример применения:

onLeave: function(origin, destination, direction){
    if(origin.index === 0 && direction === 'down'){
        console.log('Покидаем первую секцию');
    }
}

afterSlideLoad

Срабатывает после загрузки слайда внутри секции. Сигнатура:

afterSlideLoad: function(section, origin, destination, direction){}
  • section – объект родительской секции.
  • origin – предыдущий слайд внутри секции.
  • destination – текущий слайд, на который пользователь перешёл.
  • direction – "left" или "right" для горизонтального переключения.

Используется для запуска анимаций внутри слайда или подгрузки интерактивного контента.

onSlideLeave

Срабатывает перед сменой слайда. Сигнатура:

onSlideLeave: function(section, origin, destination, direction){}
  • Позволяет управлять переходами между слайдами: например, запускать таймер или анимацию выхода.

Пример:

onSlideLeave: function(section, origin, destination, direction){
    if(section.index === 1 && origin.index === 0){
        console.log('Уходим с первого слайда второй секции');
    }
}

Подключение событий через опции при инициализации

События можно задавать непосредственно при создании fullPage.js:

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

Такой подход удобен для централизованного управления анимациями и логикой взаимодействия пользователя с контентом.

Динамическое назначение обработчиков

Для более гибкого управления можно использовать методы fullpage_api:

fullpage_api.setAllowScrolling(true);
fullpage_api.setKeyboardScrolling(true);

Также через event listeners можно подписываться на события без указания их в конфигурации:

document.addEventListener('fpAfterLoad', function(e){
    console.log('fpAfterLoad событие секции', e.detail);
});
  • fpAfterLoad, fpOnLeave, fpAfterSlideLoad, fpOnSlideLeave – специальные события, которые прокидывают все данные о секции и слайде через объект detail.
  • Позволяет разделять логику загрузки слайдов и секций между модулями проекта.

Практические советы по работе с событиями

  1. Минимизировать тяжёлые вычисления внутри обработчиков – события срабатывают на каждое переключение, поэтому сложные операции могут замедлять скролл.
  2. Использовать делегирование анимаций к CSS-классам – добавление/удаление классов в afterLoad и onSlideLeave предпочтительнее прямых JS-анимаций.
  3. Проверять индекс секции и слайда – позволяет задавать уникальные эффекты для конкретных блоков.
  4. Комбинировать события – часто onLeave и afterSlideLoad используются вместе, чтобы синхронизировать выход и вход анимаций.
  5. Поддержка адаптивности – fullPage.js корректно обрабатывает события при ресайзе, но для мобильных устройств можно отключить вертикальный скролл и работать только с событиями слайдов.

Особенности работы с горизонтальными слайдами

  • Горизонтальные слайды находятся внутри секций и управляются событиями afterSlideLoad и onSlideLeave.
  • Каждый слайд имеет индекс, начиная с нуля.
  • Для управления можно использовать методы:
fullpage_api.moveSlideRight();
fullpage_api.moveSlideLeft();
fullpage_api.moveTo(sectionIndex, slideIndex);
  • При наличии nested-слайдов важно проверять section.index и destination.index внутри обработчиков, чтобы избежать конфликтов с вертикальными переходами.

Объекты секций и слайдов

События предоставляют объекты с полезными свойствами:

Секция:

  • index – номер секции, начиная с нуля.
  • anchor – якорь секции, если указан.
  • item – DOM-элемент секции.

Слайд:

  • index – номер слайда внутри секции.
  • item – DOM-элемент слайда.

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

Хотите, я могу подготовить следующую часть, посвящённую интеграции событий fullPage.js с внешними анимационными библиотеками и тонким приёмам управления визуальными эффектами?

Оглавление