События библиотеки

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

Навигационные события

1. afterLoad Вызывается после того, как пользователь попадает на новую секцию. Принимает три параметра: origin, destination, direction.

  • origin — объект секции, с которой был переход (может быть null при первой загрузке страницы).
  • destination — объект текущей секции.
  • direction — направление прокрутки: "up" или "down".

Пример использования:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log('Пользователь перешёл на секцию:', destination.index);
    }
});

2. onLeave Срабатывает перед выходом из секции. Позволяет отменять переход или запускать анимации.

  • Принимает параметры: origin, destination, direction.
  • Можно вернуть false, чтобы заблокировать переход.
new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        if(destination.index === 3){
            console.log('Переход к секции 3 заблокирован');
            return false;
        }
    }
});

3. afterRender Вызывается один раз после полной инициализации fullPage.js. Используется для выполнения действий после построения всех секций.

new fullpage('#fullpage', {
    afterRender: function(){
        console.log('fullPage.js полностью загружен');
    }
});

События при работе с слайдами

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

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

2. onSlideLeave Вызывается перед выходом слайда.

  • Параметры аналогичны afterSlideLoad.
  • Можно предотвращать переход между слайдами.
new fullpage('#fullpage', {
    onSlideLeave: function(section, origin, destination, direction){
        if(destination.index === 2){
            console.log('Переход к слайду 2 заблокирован');
            return false;
        }
    }
});

События взаимодействия

1. afterResize Срабатывает после изменения размера окна браузера.

new fullpage('#fullpage', {
    afterResize: function(width, height){
        console.log(`Размер изменён: ширина=${width}, высота=${height}`);
    }
});

2. afterResponsive Активируется после смены состояния responsive. Позволяет адаптировать поведение fullPage.js под разные разрешения.

new fullpage('#fullpage', {
    responsiveWidth: 900,
    afterResponsive: function(isResponsive){
        console.log('Responsive активен:', isResponsive);
    }
});

3. afterSlideLoad + onSlideLeave для навигации по слайдам Позволяет отслеживать динамическую навигацию внутри секции. Комбинация этих событий даёт полный контроль над слайдерами.

Пользовательские события

FullPage.js позволяет использовать пользовательские события через fp-nav или кастомные элементы навигации.

  • Можно назначать обработчики на клики по кнопкам с переходом на конкретные секции или слайды.
  • Используется метод fullpage_api.moveTo(section, slide).
document.getElementById('nextSection').addEventListener('click', function(){
    fullpage_api.moveTo(2);
});

Практические рекомендации

  • Использовать onLeave для анимаций выхода: например, запускать CSS-анимации перед сменой секции.
  • Использовать afterLoad для анимаций входа: запускать эффекты после полной загрузки секции.
  • Блокировка переходов через onLeave или onSlideLeave позволяет создавать условные сценарии навигации.
  • Комбинация событий с responsive обеспечивает корректную работу сайта на мобильных устройствах.
  • Слайдеры внутри секций управляются отдельно, и события слайдов не срабатывают для всей секции.

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

Оглавление