Событие leave

Событие leave в библиотеке ScrollMagic возникает в момент, когда сцена (Scene) перестаёт быть активной — то есть когда пользователь прокручивает страницу за пределы зоны действия сцены. Это одно из ключевых событий жизненного цикла сцены, позволяющее реагировать на выход из триггерной области.

Момент срабатывания

Событие leave вызывается, когда:

  • прокрутка проходит конечную точку сцены (при движении вниз), либо
  • прокрутка возвращается выше начальной точки сцены (при движении вверх)

Это означает, что событие может сработать в двух направлениях — важно учитывать направление прокрутки.

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

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.on("leave", function(event) {
    console.log("Сцена покинута");
})
.addTo(controller);

В этом примере:

  • сцена активна на протяжении 300 пикселей прокрутки
  • при выходе за эти границы вызывается обработчик leave

Объект события

Обработчик leave получает объект события, содержащий важные свойства:

.on("leave", function(event) {
    console.log(event.type);        // "leave"
    console.log(event.target);      // объект Scene
    console.log(event.scrollDirection); // "FORWARD" или "REVERSE"
})

Основные свойства:

  • type — тип события (leave)

  • target — текущая сцена

  • scrollDirection:

    • "FORWARD" — прокрутка вниз
    • "REVERSE" — прокрутка вверх

Поведение при разных направлениях прокрутки

Событие leave ведёт себя по-разному в зависимости от направления:

Прокрутка вниз (FORWARD)

  • срабатывает при достижении конца сцены
  • сцена становится неактивной

Прокрутка вверх (REVERSE)

  • срабатывает при выходе за начало сцены вверх
  • сцена также становится неактивной

Связь с другими событиями

Событие leave тесно связано с:

  • enter — вход в сцену
  • start — достижение начала сцены
  • end — достижение конца сцены

Порядок событий при прокрутке вниз:

  1. enter
  2. start
  3. (сцена активна)
  4. end
  5. leave

При прокрутке вверх:

  1. enter
  2. end
  3. (сцена активна)
  4. start
  5. leave

Использование для управления анимациями

Событие leave часто применяется для:

1. Сброса состояния

.on("leave", function() {
    document.querySelector("#box").classList.remove("active");
})

2. Остановки анимации

.on("leave", function() {
    animation.pause();
})

3. Удаления классов

.on("leave", function() {
    scene.removeClassToggle(true);
})

Использование с длительными сценами

При наличии duration событие leave означает полное завершение сцены:

new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: 500
})
.on("leave", function() {
    console.log("Прокрутка прошла всю сцену");
});

Отличие от события end

Важно различать:

  • end — достижение конца сцены (точка)
  • leave — выход за пределы сцены (состояние)

Пример:

.on("end", function() {
    console.log("Достигнут конец сцены");
})
.on("leave", function() {
    console.log("Сцена полностью покинута");
})

Работа с нулевой длительностью

Если duration: 0, сцена становится точечной:

new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 0
})

В этом случае:

  • enter и leave происходят почти одновременно
  • сцена не имеет протяжённости

Практический пример: управление фиксированным элементом

var scene = new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: 200
})
.on("enter", function() {
    document.body.classList.add("fixed-header");
})
.on("leave", function(event) {
    if (event.scrollDirection === "REVERSE") {
        document.body.classList.remove("fixed-header");
    }
})
.addTo(controller);

Логика:

  • при входе в сцену включается фиксированный header
  • при прокрутке вверх (выходе назад) — отключается

Частые ошибки

1. Игнорирование направления прокрутки

.on("leave", function() {
    // ошибка: не учитывается направление
})

Корректно:

.on("leave", function(event) {
    if (event.scrollDirection === "FORWARD") {
        // логика для прокрутки вниз
    }
})

2. Путаница с end

Событие end не означает, что сцена завершена — только достигнута её конечная точка.

3. Повторное срабатывание

Событие leave может вызываться многократно при прокрутке туда-обратно. Это требует контроля состояния:

let triggered = false;

scene.on("leave", function() {
    if (!triggered) {
        triggered = true;
        // действие
    }
});

Комбинирование с классами и CSS

Часто leave используется вместе с CSS-классами:

scene.on("leave", function() {
    document.querySelector("#section").classList.add("hidden");
});

Отладка

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

scene.on("leave", function(event) {
    console.log("leave", event.scrollDirection, event.target);
});

Или включить индикаторы:

scene.addIndicators();

(при использовании плагина debug.addIndicators)

Использование в цепочках событий

scene
.on("enter", handlerEnter)
.on("leave", handlerLeave)
.on("progress", handlerProgress);

Позволяет выстроить полный контроль над жизненным циклом сцены.

Влияние offset и triggerHook

Параметры сцены влияют на момент срабатывания leave:

new ScrollMagic.Scene({
    triggerElement: "#block",
    offset: 100,
    triggerHook: 0.5,
    duration: 300
})
  • offset смещает точку начала
  • triggerHook определяет позицию на экране

Это напрямую влияет на то, когда произойдёт leave.

Сценарии применения

  • завершение анимации при выходе из области
  • очистка DOM-изменений
  • деактивация эффектов (параллакс, фиксированные элементы)
  • переключение состояний интерфейса
  • управление воспроизведением видео или аудио

Поведение при destroy сцены

Если сцена уничтожается:

scene.destroy(true);

Событие leave не вызывается автоматически, поэтому при необходимости нужно вызывать логику вручную.

Итоговая модель

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

Оглавление