Что такое ScrollMagic

ScrollMagic — это JavaScript-библиотека для управления анимациями и событиями при прокрутке страницы. Она позволяет привязывать действия к положению скролла, создавать «эффект параллакса», а также синхронизировать анимации с прокруткой. В основе работы лежит идея сцен (scenes) и контроллеров (controllers).

  • Контроллер (Controller) — объект, который управляет сценами. Он отслеживает прокрутку страницы и обновляет все сцены, которые к нему привязаны. Контроллер может быть связан с конкретным контейнером, что позволяет создавать сложные прокрутки внутри блоков.

  • Сцена (Scene) — логическая единица, определяющая, когда и как выполняется анимация. Сцена может иметь:

    • triggerElement — элемент, который запускает сцену при попадании в область видимости;
    • duration — длительность сцены, измеряемую в пикселях или процентах от высоты окна;
    • triggerHook — точка на экране, относительно которой срабатывает сцена (от 0 до 1, где 0 — верх окна, 1 — низ окна).

Инициализация контроллера

Создание контроллера — первый шаг при работе с ScrollMagic:

var controller = new ScrollMagic.Controller();

Контроллер может принимать параметры, например:

var controller = new ScrollMagic.Controller({
  globalSceneOptions: { triggerHook: 0.5 } // общие настройки для всех сцен
});

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

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

Сцена создается через new ScrollMagic.Scene({ ... }). Пример базовой сцены:

var scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 300,
  triggerHook: 0.75
})
.setClassToggle("#animateElement", "visible") // добавляет класс при срабатывании
.addTo(controller); // привязывает сцену к контроллеру

Пояснение параметров:

  • triggerElement — элемент DOM, относительно которого сцена активируется.
  • duration — длительность сцены. Если указана, класс или анимация может сохраняться на протяжении этого расстояния прокрутки.
  • triggerHook — точка запуска сцены на экране. Например, 0.5 — середина окна.

Анимации с использованием TweenMax / GSAP

ScrollMagic часто используется вместе с GSAP (TweenMax / TweenLite) для плавных анимаций:

var tween = TweenMax.to("#box", 1, { x: 200, rotation: 360 });

var scene = new ScrollMagic.Scene({
  triggerElement: "#section2",
  duration: 500
})
.setTween(tween)
.addTo(controller);
  • setTween привязывает анимацию к сцене.
  • Длительность сцены определяет скорость анимации: чем больше duration, тем медленнее проходит анимация по мере прокрутки.

Важные методы сцен

  • setPin(element, settings) — фиксирует элемент на экране на время сцены. Используется для «приклеивания» элементов при прокрутке.
var scene = new ScrollMagic.Scene({
  triggerElement: "#section3",
  duration: 400
})
.setPin("#stickyElement")
.addTo(controller);
  • addIndicators() — инструмент отладки, который визуализирует, где начинается и заканчивается сцена.
scene.addIndicators({ name: "Scene 1" });
  • on(event, callback) — позволяет реагировать на события сцены:
scene.on("enter", function (event) {
  console.log("Сцена активирована");
});
scene.on("leave", function (event) {
  console.log("Сцена завершена");
});

Доступные события: enter, leave, start, end, update.

Сложные сценарии

Последовательные сцены

Можно создавать несколько сцен, которые реагируют на прокрутку в одной секции:

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1", duration: 200 })
  .setClassToggle("#elem1", "visible")
  .addTo(controller);

var scene2 = new ScrollMagic.Scene({ triggerElement: "#section1", duration: 200, offset: 100 })
  .setClassToggle("#elem2", "visible")
  .addTo(controller);

offset позволяет сдвигать запуск сцен относительно triggerElement.

Синхронизация с анимацией прокрутки

С помощью ScrollMagic можно создавать эффект параллакса, где элементы двигаются с разной скоростью:

var tween = TweenMax.to("#bg", 1, { y: "-50%", ease: Linear.easeNone });

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

Длительность "100%" означает, что анимация будет длиться столько, сколько высота экрана, что позволяет точно синхронизировать движение с прокруткой.

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

ScrollMagic учитывает высоту окна и может работать с сенсорной прокруткой, однако при необходимости оптимизации:

  • использовать controller.refresh() после динамических изменений контента;
  • учитывать плавность анимаций на слабых устройствах, так как фиксированные элементы и тяжелые tween-эффекты могут снижать производительность.

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

  • GSAP / TweenMax — для сложных анимаций;
  • jQuery — для удобного выбора элементов, хотя ScrollMagic может работать с чистым JS;
  • Three.js / PixiJS — для 3D и графики, синхронизированной с прокруткой.

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

Оглавление