Проверка активности сцены

В ScrollMagic каждая сцена (Scene) представляет собой элемент, отслеживающий положение скролла относительно заданного триггера. Одним из ключевых аспектов работы со сценами является возможность определить, активна сцена в данный момент или нет. Активность сцены позволяет выполнять анимации и управлять поведением элементов только в нужное время, экономя ресурсы и обеспечивая точный контроль над интерфейсом.

Свойство Scene.enabled

Каждая сцена имеет свойство enabled, которое определяет, включена ли сцена для отслеживания скролла:

var scene = new ScrollMagic.Scene({triggerElement: "#trigger"})
    .addTo(controller);

console.log(scene.enabled()); // true
scene.enabled(false); // отключение сцены
  • scene.enabled(true) – сцена активна, её триггер обрабатывается.
  • scene.enabled(false) – сцена отключена, изменения скролла игнорируются.

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

События enter и leave

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

  • enter – срабатывает, когда сцена входит в активную область.
  • leave – срабатывает, когда сцена покидает активную область.

Пример:

scene.on("enter", function(event) {
    console.log("Сцена активна");
});

scene.on("leave", function(event) {
    console.log("Сцена неактивна");
});

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

  • Событие enter срабатывает при достижении триггерного элемента и активации сцены.
  • Событие leave срабатывает, когда пользователь прокручивает страницу так, что сцена выходит из зоны действия.
  • event.scrollDirection внутри обработчика позволяет определить направление скролла ("FORWARD" или "REVERSE").

Проверка активности через scene.state()

Метод state() возвращает строку, указывающую текущее состояние сцены:

console.log(scene.state()); // "BEFORE", "DURING" или "AFTER"
  • "BEFORE" – сцена ещё не активирована, скролл до триггера.
  • "DURING" – сцена активна, элемент в зоне действия.
  • "AFTER" – сцена уже прошла, триггер находится выше или ниже видимой области.

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

if (scene.state() === "DURING") {
    element.classList.add("active-animation");
} else {
    element.classList.remove("active-animation");
}

Метод scene.triggerHook()

triggerHook задаёт точку на экране, где сцена считается активной. Параметр принимает значение от 0 до 1:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    triggerHook: 0.5 // середина окна
});
  • 0 – верх экрана, сцена активна сразу при появлении триггера.
  • 1 – низ экрана, сцена активна только когда триггер дойдёт до нижней границы окна.
  • Используется совместно с событиями enter и leave для точной настройки момента активации.

Пример комплексной проверки активности сцены

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 300
})
.addTo(controller);

scene.on("enter leave", function(event) {
    if (scene.state() === "DURING") {
        document.querySelector("#section1").classList.add("active");
    } else {
        document.querySelector("#section1").classList.remove("active");
    }
});

Пояснение:

  • События объединены через "enter leave".
  • Состояние сцены проверяется через state().
  • Класс active добавляется только когда сцена активна, удаляется при выходе из зоны действия.

Использование scene.progress()

Для более точного контроля активности можно использовать метод progress(), который возвращает значение прогресса сцены от 0 до 1:

scene.on("progress", function(event) {
    console.log("Прогресс сцены: " + event.progress);
});
  • Значение 0 – сцена ещё не активна.
  • Значение 1 – сцена полностью пройдена.
  • Позволяет реализовать пошаговые анимации, управляемые прокруткой.

Совместное использование событий и состояния

Комбинация методов enabled(), state(), triggerHook() и события progress позволяет:

  • Точно определить активность сцены.
  • Оптимизировать ресурсы, включая анимации только при необходимости.
  • Реализовывать интерактивные эффекты, зависящие от положения скролла.

Эти инструменты создают основу для полноценного контроля динамических интерфейсов с ScrollMagic и позволяют строить сложные прокручиваемые анимации с точной проверкой активности сцен.

Оглавление