Сцены как основные элементы

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

Создание сцены

Создать сцену можно с использованием конструктора ScrollMagic.Scene. Основной синтаксис:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // Элемент, при попадании которого сцена активируется
    duration: 200,              // Длина сцены в пикселях или как процент от высоты окна
    offset: 50                  // Сдвиг начала сцены относительно triggerElement
});

Ключевые параметры сцены:

  • triggerElement – элемент DOM, относительно которого рассчитывается начало сцены. Может быть любым CSS-селектором или DOM-узлом.
  • duration – длина сцены. Если установлено в 0, сцена будет мгновенной (событие срабатывает один раз). Если больше нуля, сцена активна на протяжении указанной длины прокрутки.
  • offset – смещение начала сцены от верхней границы triggerElement. Позволяет точнее позиционировать момент активации.

Привязка контроллера

Сцена без контроллера не функционирует. Контроллер (ScrollMagic.Controller) управляет всеми сценами и синхронизирует их с прокруткой:

var controller = new ScrollMagic.Controller();
scene.addTo(controller);

Контроллер может быть настроен с дополнительными параметрами, например vertical: false, если требуется горизонтальная прокрутка.

События сцены

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

  • enter – срабатывает, когда прокрутка достигает начала сцены.
  • leave – срабатывает, когда прокрутка выходит за пределы сцены.
  • start и end – указывают точное положение начала и конца сцены относительно окна просмотра.
  • progress – процент прохождения сцены, значение от 0 до 1.

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

scene.on("enter", function (event) {
    console.log("Сцена активирована");
});
scene.on("progress", function (event) {
    console.log("Прогресс сцены:", event.progress);
});

Контролируемые анимации

Сцены в ScrollMagic часто используются совместно с библиотекой GSAP (GreenSock Animation Platform) для создания плавных анимаций:

var tween = gsap.to("#animate", {duration: 1, x: 300, opacity: 0.5});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.setTween(tween)
.addTo(controller);

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

Опции фиксации элементов

С помощью метода setPin элемент можно «закрепить» на время действия сцены:

scene.setPin("#pinnedElement");

Особенности setPin:

  • Элемент остаётся фиксированным на экране на протяжении всей сцены.
  • Поддерживает анимации внутри закреплённого блока.
  • Можно комбинировать с duration и offset для сложных эффектов параллакса.

Управление поведением сцены

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

  • scene.addIndicators() – отображает визуальные индикаторы начала и конца сцены (только для разработки).
  • scene.remove() – удаляет сцену из контроллера.
  • scene.destroy() – полностью уничтожает сцену, освобождая ресурсы.
  • scene.update() – обновляет расчёт сцены после изменений DOM или размеров окна.

Продвинутые техники

  1. Комбинирование нескольких сцен – позволяет создавать сложные последовательности анимаций:

    var scene1 = new ScrollMagic.Scene({ triggerElement: "#first" }).setTween(tween1).addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: "#second" }).setTween(tween2).addTo(controller);

  2. Вложенные сцены – сцена внутри сцены может управлять отдельной анимацией элемента, сохраняя синхронизацию с основной прокруткой.

  3. Прогресс-ориентированная анимация – использование event.progress для управления сложными изменениями CSS, например цветом, масштабом или прозрачностью.

Практические советы

  • Всегда задавать duration для сцен, где требуется плавная анимация, иначе эффект будет мгновенным.
  • Для оптимизации производительности избегать большого количества активных сцена с анимациями одновременно.
  • Использовать update() после динамического изменения контента, чтобы сцена правильно пересчитала свои параметры.

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

Оглавление