Управление глубиной

ScrollMagic позволяет управлять поведением элементов на странице в зависимости от прокрутки, создавая слои анимации, эффекты параллакса и интерактивные сцены. Центральное понятие — это сцена (Scene), которая задаёт три ключевых параметра: начало, продолжительность и цель анимации. Управление глубиной заключается в том, чтобы корректно настраивать порядок наложения элементов и их взаимодействие в пространстве прокрутки.

Контроллер и сцены

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

var controller = new ScrollMagic.Controller();

После создания контроллера сцены можно добавлять:

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

Управление порядком слоёв

Чтобы элементы корректно накладывались друг на друга, нужно управлять z-index и положением относительно родительского контейнера. ScrollMagic не изменяет z-index автоматически, поэтому его необходимо назначать через CSS:

.layer1 { z-index: 1; position: relative; }
.layer2 { z-index: 2; position: relative; }
.layer3 { z-index: 3; position: relative; }

При наложении нескольких анимаций можно использовать метод .setPin() для фиксации элемента на месте, что создаёт эффект “глубины”:

new ScrollMagic.Scene({
    triggerElement: "#pin-trigger",
    duration: 400
})
.setPin("#pinned-element")
.addTo(controller);

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

  • Пиннинг работает только с позиционированными элементами (position: relative/absolute/fixed).
  • Элемент остаётся на месте на протяжении всей длительности сцены.
  • Можно комбинировать несколько пинованных элементов для создания эффектов параллакса.

Эффекты параллакса

Для создания глубины параллакса анимация разных элементов должна происходить с разной скоростью и длительностью. ScrollMagic интегрируется с TweenMax/TweenLite и GSAP, что позволяет управлять сложными временными линиями:

var tweenForeground = TweenMax.to("#foreground", 1, {y: -100, ease: Linear.easeNone});
var tweenBackground = TweenMax.to("#background", 1, {y: -50, ease: Linear.easeNone});

new ScrollMagic.Scene({
    triggerElement: "#scene",
    duration: 600
})
.setTween(tweenForeground)
.addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#scene",
    duration: 600
})
.setTween(tweenBackground)
.addTo(controller);
  • Элементы с меньшей скоростью создают впечатление глубины.
  • Комбинируя pinning и разную длительность, можно имитировать трёхмерное пространство при прокрутке.

Работа с несколькими слоями и сцена-композитами

Для комплексных эффектов создают контейнеры-сцены с вложенными анимациями. Например:

var timeline = new TimelineMax();
timeline
  .to("#layer1", 1, {y: -100})
  .to("#layer2", 1, {y: -50}, "-=1")
  .to("#layer3", 1, {y: -20}, "-=1");

new ScrollMagic.Scene({
    triggerElement: "#composite",
    duration: 800
})
.setTween(timeline)
.addTo(controller);
  • Метод TimelineMax позволяет синхронизировать движения нескольких элементов.
  • Параметр "-=1" задаёт одновременное начало анимаций, создавая эффект слоёв, двигающихся с разной скоростью.
  • Этот подход идеален для имитации глубины пространства, где передний план движется быстрее заднего.

Динамическая настройка глубины через JavaScript

Иногда необходимо изменять z-index или продолжительность сцены в зависимости от условий:

var depthFactor = window.innerWidth > 1200 ? 1.5 : 1;

document.querySelectorAll(".layer").forEach((el, index) => {
    el.style.zIndex = index * depthFactor;
});

scene.duration(window.innerHeight * depthFactor);
  • Использование window.innerHeight и depthFactor позволяет адаптировать эффект под экран.
  • Изменение zIndex динамически поддерживает корректный порядок слоёв при изменении контента или размера окна.

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

ScrollMagic позволяет реагировать на изменение состояния сцены с помощью событий:

scene.on("enter", function () {
    console.log("Элемент вошёл в зону видимости");
});

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

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

  • Использовать позиционирование и z-index для всех слоёв.
  • Комбинировать pinning и TimelineMax/GSAP для сложной анимации.
  • Разная скорость анимации переднего и заднего плана создаёт ощущение глубины.
  • Динамическое изменение параметров сцены обеспечивает адаптивность под разные устройства.
  • Следить за производительностью: большое количество пинованных элементов и длинные анимации могут сильно нагрузить браузер.

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

Оглавление