onLeave

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

Синтаксис события в объекте инициализации fullPage.js выглядит так:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        // Действия при уходе с секции
    }
});

Здесь origin, destination и direction являются объектами и строкой, предоставляющими всю необходимую информацию о переходе.

Параметры коллбека onLeave

  1. origin – объект, описывающий текущую секцию, с которой происходит уход. Содержит следующие свойства:

    • index – числовой индекс секции (начиная с 0)
    • anchor – якорь секции, если он задан через anchors
    • item – DOM-элемент секции
    • isFirst – логическое значение, true если это первая секция
    • isLast – логическое значение, true если это последняя секция

  2. destination – объект секции, в которую будет выполнен переход. Свойства аналогичны объекту origin.

  3. direction – строка, показывающая направление скролла:

    • 'up' – переход вверх
    • 'down' – переход вниз

Пример:

onLeave: function(origin, destination, direction){
    console.log(`Уход с секции ${origin.index}, переход в секцию ${destination.index}`);
    console.log(`Направление скролла: ${direction}`);
}

Возвращаемое значение и контроль перехода

onLeave может контролировать возможность перехода. Для этого функция должна вернуть false, чтобы отменить скролл. Это особенно полезно при валидации форм или при необходимости остановить пользователя на текущей секции.

Пример блокировки перехода на следующую секцию:

onLeave: function(origin, destination, direction){
    if(destination.index === 2 && !formIsValid()){
        alert("Сначала заполните форму!");
        return false; // блокирует переход
    }
}

Если возврат false отсутствует, переход выполняется стандартно.

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

Изменение стилей при уходе с секции

Можно динамически добавлять или удалять классы у элементов секции, чтобы менять внешний вид при переходе:

onLeave: function(origin, destination, direction){
    origin.item.classList.remove('active-section');
    destination.item.classList.add('active-section');
}

Анимация элементов при скролле

onLeave удобно использовать для запуска CSS или JS-анимаций перед сменой секции:

onLeave: function(origin, destination, direction){
    gsap.to(origin.item.querySelector('.title'), {opacity: 0, duration: 0.5});
    gsap.fromTo(destination.item.querySelector('.title'), {opacity: 0}, {opacity: 1, duration: 0.5});
}

Логирование событий для аналитики

Можно фиксировать, как пользователи перемещаются по секциям:

onLeave: function(origin, destination, direction){
    console.log(`Пользователь ушёл с ${origin.index} в ${destination.index}`);
    sendAnalyticsEvent('section_leave', {
        from: origin.index,
        to: destination.index,
        direction: direction
    });
}

Взаимодействие с другими событиями

  • afterLoad – срабатывает после завершения анимации скролла. Используется вместе с onLeave для разделения действий «до» и «после» перехода.
  • afterRender – вызывается один раз после инициализации fullPage.js. Может быть полезен для первоначальной подготовки секций перед первыми переходами.

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

Лучшие практики использования onLeave

  1. Проверять свойства origin и destination, чтобы корректно работать с первой и последней секцией.
  2. Возврат false использовать только при необходимости блокировки перехода, иначе оставлять функцию без возвращаемого значения.
  3. Минимизировать тяжелые операции внутри коллбека, чтобы не тормозить анимацию скролла.
  4. Для сложных анимаций комбинировать onLeave с afterLoad, чтобы эффекты запускались синхронно с движением страницы.
  5. Использовать direction для адаптивного поведения элементов в зависимости от направления скролла.

onLeave позволяет не только реагировать на уход с секции, но и активно управлять пользовательским опытом, задавать правила навигации и создавать визуально насыщенные эффекты.

Оглавление