Активация и деактивация

ScrollMagic строится вокруг понятия сцен (Scenes), которые управляют поведением элементов при прокрутке страницы. Каждая сцена может быть активной или неактивной, что напрямую влияет на то, когда и как анимации или действия запускаются.

Активация сцены происходит, когда пользователь прокручивает страницу до точки, определённой свойством triggerElement и triggerHook. Когда прокрутка достигает этой точки, сцена переходит в состояние active и выполняет назначенные действия.

Деактивация сцены — это возвращение сцены в исходное состояние при движении прокрутки обратно выше triggerElement. Это важно для сценариев с обратимыми анимациями или изменяемыми стилями, когда необходимо откатить изменения.

Свойства и методы для управления состоянием

  1. enabled Свойство scene.enabled() позволяет программно включать или отключать сцену.
scene.enabled(false); // сцена деактивируется и не реагирует на прокрутку
scene.enabled(true);  // сцена снова активна

Если сцена выключена, она не реагирует на прокрутку и не вызывает события enter, leave или progress.

  1. addTo(controller) Добавление сцены в контроллер активирует её управление событиями прокрутки:
var controller = new ScrollMagic.Controller();
scene.addTo(controller);

Удаление сцены из контроллера деактивирует её автоматически:

scene.remove();
  1. destroy() Метод destroy() полностью удаляет сцену и освобождает ресурсы:
scene.destroy(true); // true — удаляет сцены вместе с событиями

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

Управление событиями активации

ScrollMagic предоставляет события, которые сигнализируют об изменении состояния сцены:

  • enter — срабатывает, когда сцена становится активной (прокрутка достигает точки триггера).
scene.on("enter", function(event) {
    console.log("Сцена активирована");
});
  • leave — срабатывает, когда сцена покидает активное состояние (прокрутка уходит выше триггера или за предел сцены).
scene.on("leave", function(event) {
    console.log("Сцена деактивирована");
});
  • start и end — точные позиции начала и конца сцены. Эти события позволяют реагировать на конкретные моменты в прокрутке.

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

Программная активация и деактивация

Иногда необходимо не ждать прокрутки, а активировать или деактивировать сцену вручную:

  • trigger() Метод scene.trigger() инициирует сцену как если бы прокрутка достигла триггерной позиции.
scene.trigger(); // активирует сцену программно
  • update() Метод scene.update() пересчитывает состояние сцены на основе текущей позиции скролла. Полезно после изменения параметров сцены:
scene.offset(200); // сдвиг триггера
scene.update();    // пересчёт состояния

Взаимодействие нескольких сцен

В сложных интерфейсах часто используется несколько сцен на одной странице. Контроль активации и деактивации каждой сцены позволяет:

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

Пример:

var scene1 = new ScrollMagic.Scene({triggerElement: "#section1"}).addTo(controller);
var scene2 = new ScrollMagic.Scene({triggerElement: "#section2"}).addTo(controller);

scene1.on("enter", function() {
    scene2.enabled(true); // включение следующей сцены только после активации первой
});

scene1.on("leave", function() {
    scene2.enabled(false); // деактивация второй сцены, если первая ушла
});

Настройка обратимых действий

Сцену можно сделать обратимой, чтобы её эффекты исчезали при прокрутке назад. Для этого используются комбинации duration, reverse и событий:

  • reverse: true (по умолчанию) — сцена возвращается в исходное состояние при движении прокрутки обратно.
  • reverse: false — сцена активируется один раз и не деактивируется автоматически.

Пример обратимой анимации:

var scene = new ScrollMagic.Scene({
    triggerElement: "#box",
    duration: 300,
    reverse: true
})
.setTween("#box", 0.5, {x: 200})
.addTo(controller);

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

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

  • Разделять активацию и анимацию: сначала сцена определяет состояние активной зоны, затем через события управляет анимацией или стилями.
  • Использовать enabled() для оптимизации: отключать сцены, которые временно не нужны, чтобы снизить нагрузку на рендеринг.
  • Управлять зависимостями между сценами через события enter и leave для сложных интерактивных интерфейсов.
  • Проверять поведение reverse для анимаций, которые должны откатываться при обратной прокрутке.

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

Оглавление