Событие enter

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

Общая концепция

Каждая сцена в ScrollMagic проходит через несколько состояний:

  • BEFORE — сцена еще не достигла точки активации
  • DURING — сцена активна
  • AFTER — сцена завершена

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

Синтаксис подписки на событие

scene.on("enter", function (event) {
    // обработка события
});

Где:

  • scene — экземпляр ScrollMagic.Scene
  • "enter" — имя события
  • event — объект события, содержащий дополнительную информацию

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

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

  • type — тип события ("enter")
  • target — ссылка на сцену
  • progress — текущий прогресс сцены (от 0 до 1)
  • state — текущее состояние сцены ("DURING")
  • scrollDirection — направление прокрутки ("FORWARD" или "REVERSE")

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

scene.on("enter", function (event) {
    console.log("Сцена активирована");
    console.log("Направление:", event.scrollDirection);
});

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

1. Запуск анимации

Событие enter часто используется для запуска анимаций при появлении элемента в области видимости:

scene.on("enter", function () {
    document.querySelector(".box").classList.add("animate");
});

2. Ленивая загрузка контента

При прокрутке страницы можно загружать ресурсы только тогда, когда они становятся видимыми:

scene.on("enter", function () {
    loadImages();
});

3. Триггер логики

Событие удобно для запуска любых сценариев:

scene.on("enter", function () {
    console.log("Пользователь дошел до нужного блока");
});

Учет направления прокрутки

Событие enter срабатывает как при прокрутке вниз, так и вверх. Для различения используется scrollDirection:

scene.on("enter", function (event) {
    if (event.scrollDirection === "FORWARD") {
        console.log("Прокрутка вниз");
    } else {
        console.log("Прокрутка вверх");
    }
});

Взаимодействие с параметром reverse

Параметр reverse определяет, должна ли сцена повторно активироваться при обратной прокрутке:

new ScrollMagic.Scene({
    triggerElement: "#trigger",
    reverse: false
});
  • reverse: true (по умолчанию) — событие enter срабатывает каждый раз при входе в сцену
  • reverse: false — событие enter срабатывает только один раз

Отличие от других событий

enter vs start

  • enter — срабатывает при входе сцены в активную область
  • start — срабатывает в момент достижения точки начала сцены

Часто эти события совпадают, но при использовании offset или duration поведение может различаться.

enter vs progress

  • enter — одноразовое событие (в момент входа)
  • progress — вызывается непрерывно во время прокрутки сцены

enter vs leave

  • enter — вход в активную фазу
  • leave — выход из активной фазы

Особенности работы с duration

Если сцена имеет длительность (duration > 0), событие enter:

  • срабатывает в начале сцены
  • не повторяется в процессе прокрутки внутри сцены
new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
});

Использование с несколькими обработчиками

К одной сцене можно привязать несколько обработчиков:

scene.on("enter", handler1);
scene.on("enter", handler2);

Также возможно удаление обработчика:

scene.off("enter", handler1);

Контекст выполнения

Внутри обработчика this ссылается на сцену:

scene.on("enter", function () {
    console.log(this === scene); // true
});

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

1. Повторное срабатывание без учета направления

scene.on("enter", function () {
    // код выполнится и при прокрутке вверх
});

Решение — проверка scrollDirection.

2. Непонимание reverse

Ожидание одноразового события при reverse: true приводит к дублированию логики.

3. Использование enter вместо progress

Если требуется отслеживать процесс внутри сцены, enter не подходит.

Комбинирование с другими событиями

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

scene
    .on("enter", function () {
        console.log("Вход");
    })
    .on("leave", function () {
        console.log("Выход");
    });

Поведение при быстром скролле

При резкой прокрутке (например, колесом мыши или свайпом) событие enter гарантированно срабатывает, даже если пользователь «перескочил» сцену. Это обеспечивается внутренним механизмом проверки состояния сцены.

Отладка

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

scene.addIndicators();

Это позволяет увидеть:

  • точку входа сцены
  • область длительности
  • момент срабатывания enter

Рекомендации по использованию

  • Использовать enter для одноразовых триггеров
  • Проверять направление прокрутки при необходимости
  • Комбинировать с leave для контроля жизненного цикла сцены
  • Не перегружать обработчики тяжелыми операциями
  • При сложной логике использовать флаги состояния

Пример полной сцены

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    triggerHook: 0.8,
    reverse: true
})
.on("enter", function (event) {
    if (event.scrollDirection === "FORWARD") {
        console.log("Вход вниз");
    } else {
        console.log("Вход вверх");
    }
})
.addTo(controller);

Поведение при разных triggerHook

Параметр triggerHook определяет точку срабатывания:

  • 0 — верх экрана
  • 0.5 — центр
  • 1 — низ

Событие enter срабатывает, когда triggerElement достигает этой позиции.

Влияние offset

Дополнительное смещение изменяет момент входа:

new ScrollMagic.Scene({
    triggerElement: "#block",
    offset: 100
});

Событие enter произойдет позже на 100 пикселей прокрутки.

Работа с динамическим контентом

При изменении размеров страницы или элементов необходимо обновлять сцену:

scene.refresh();

Иначе событие enter может сработать в некорректный момент.

Использование в связке с CSS

.fade-in {
    opacity: 0;
    transition: opacity 0.5s;
}

.fade-in.visible {
    opacity: 1;
}
scene.on("enter", function () {
    document.querySelector(".fade-in").classList.add("visible");
});

Масштабирование и производительность

При большом количестве сцен:

  • минимизировать логику внутри enter
  • избегать частых DOM-операций
  • использовать делегирование, где возможно

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

Оглавление