Интерактивные иллюстрации

ScrollMagic — это библиотека для управления анимациями и взаимодействиями на странице с прокруткой. Она позволяет создавать скролл-зависимые анимации, управлять элементами DOM и синхронизировать события с положением скролла. Основными строительными блоками библиотеки являются Controller, Scene и методы управления анимацией.

  • Controller управляет всеми сценами и следит за положением скролла. Обычно создаётся один контроллер на страницу:
var controller = new ScrollMagic.Controller();
  • Scene — это объект, который определяет событие, привязанное к скроллу, его продолжительность, триггер и действия:
var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger", // элемент, который запускает сцену
  duration: 300,              // длина сцены в пикселях
  offset: 50                  // смещение от триггера
});
  • Методы сцены позволяют прикреплять анимации, классы или события:
scene
  .setTween("#animate", {opacity: 0, y: -50}) // подключение анимации TweenMax
  .addTo(controller);                          // добавление сцены в контроллер

Работа с триггерами и анимациями

TriggerElement определяет точку на странице, с которой начинается анимация. Она может быть любым DOM-элементом. Offset позволяет смещать начало сцены относительно триггера, а duration задаёт продолжительность действия сцены.

Пример плавного появления элемента при скролле:

var tween = gsap.to("#box", {duration: 1, x: 400, opacity: 1});

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

В этом примере элемент с id="box" будет постепенно перемещаться вправо и становиться видимым в течение 500 пикселей скролла.

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

ScrollMagic позволяет добавлять или удалять CSS-классы при достижении определённого положения скролла:

var scene = new ScrollMagic.Scene({triggerElement: "#trigger"})
  .setClassToggle("#element", "visible") // добавляет класс 'visible'
  .addTo(controller);

Также доступны события, на которые можно подписываться:

scene.on("enter", function() {
  console.log("Элемент появился на экране");
});

scene.on("leave", function() {
  console.log("Элемент покинул экран");
});

События enter и leave срабатывают при пересечении триггерной точки.

Параллакс и скролл-анимации

Параллакс-эффекты создаются через Tween-анимации, привязанные к прокрутке. Ключевой момент — синхронизация движения с положением скролла:

var tween = gsap.to("#background", {y: "50%", ease: "none"});

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

Использование ease: "none" гарантирует линейное движение элемента при скролле, что создаёт эффект параллакса без ускорений и замедлений.

Многосценовые проекты

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

var scene1 = new ScrollMagic.Scene({triggerElement: "#section1"})
  .setClassToggle("#image1", "active")
  .addTo(controller);

var scene2 = new ScrollMagic.Scene({triggerElement: "#section2"})
  .setTween("#image2", {scale: 1.2})
  .addTo(controller);

Интеграция с GSAP и другими библиотеками

ScrollMagic тесно интегрируется с GSAP (GreenSock Animation Platform), позволяя создавать сложные анимации с таймлайнами и контролем скорости:

var tl = gsap.timeline();
tl.to("#box", {x: 100, duration: 1})
  .to("#box", {y: 200, duration: 1});

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

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

Практические советы по оптимизации

  • Использовать один Controller для всей страницы, чтобы минимизировать нагрузку.
  • Настраивать duration в пикселях или процентах для адаптивного поведения.
  • Для элементов, которые должны появляться/исчезать мгновенно, использовать setClassToggle вместо анимации.
  • Аккуратно комбинировать сцены с длительными tween-анимациями, чтобы избежать «заиканий» при быстром скролле.
  • Проверять производительность на мобильных устройствах, особенно при большом количестве параллакс-эффектов.

Закрепление элементов и pinning

ScrollMagic поддерживает фиксирование элементов на определённый период прокрутки с помощью метода setPin:

var scene = new ScrollMagic.Scene({
  triggerElement: "#pin-section",
  duration: 300
})
.setPin("#pinned-element")
.addTo(controller);

Элемент с id="pinned-element" будет оставаться зафиксированным на экране на протяжении 300 пикселей скролла. Это удобно для блоков с интерактивными иллюстрациями, слайдеров или параллаксных фонов.

Адаптивность и мобильные устройства

Для корректной работы на мобильных устройствах следует учитывать:

  • Высоту и ширину окна (window.innerHeight), чтобы корректно рассчитывать триггерные точки.
  • Использовать duration в процентах, чтобы сцены масштабировались под разную высоту экрана.
  • Минимизировать сложные анимации на слабых устройствах, заменяя их на простое появление/исчезновение классов.

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

Оглавление