Различные анимации для разных направлений

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

Создание базового контроллера

Перед добавлением анимаций необходимо создать контроллер:

var controller = new ScrollMagic.Controller();

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

Анимации по вертикали

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500,
    triggerHook: 0.5
})
.setTween("#box", {y: 200, opacity: 1, ease: Linear.easeNone})
.addTo(controller);

Пояснение ключевых параметров:

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

Эффект плавной анимации достигается с помощью библиотеки TweenMax или GSAP.

Горизонтальные анимации

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

var sceneHorizontal = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 800,
    triggerHook: 0.5
})
.setTween("#box2", {x: 400, ease: Power1.easeInOut})
.addTo(controller);

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

  • Использование x вместо y меняет направление движения на горизонтальное.
  • Power1.easeInOut создаёт плавное ускорение и замедление.
  • Горизонтальная прокрутка чаще всего комбинируется с эффектами «параллакса», когда фон движется медленнее переднего плана.

Анимации с глубиной (ось Z)

Для создания эффекта приближения или удаления объектов используется масштабирование и z-index через CSS-трансформации. Прямой работы с осью Z в ScrollMagic нет, поэтому анимация реализуется через CSS и TweenMax/GSAP:

var sceneZ = new ScrollMagic.Scene({
    triggerElement: "#section3",
    duration: 600
})
.setTween("#box3", {scale: 2, opacity: 0.5, ease: Power2.easeOut})
.addTo(controller);

Ключевые моменты:

  • scale имитирует движение объекта по оси Z.
  • Изменение прозрачности усиливает эффект глубины.
  • Можно комбинировать с y или x для сложных пространственных анимаций.

Комбинированные анимации

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

var combinedScene = new ScrollMagic.Scene({
    triggerElement: "#section4",
    duration: 1000
})
.setTween("#box4", {
    x: 300,
    y: 200,
    scale: 1.5,
    rotation: 45,
    ease: Power3.easeInOut
})
.addTo(controller);

Пояснение эффектов:

  • x и y управляют позиционированием по горизонтали и вертикали.
  • scale увеличивает или уменьшает объект.
  • rotation создаёт вращение вокруг центра элемента.
  • ease: Power3.easeInOut обеспечивает естественное ускорение и замедление движения.

Такие сцены часто применяются для интерактивных лендингов и параллакс-эффектов, создавая ощущение динамичного пространства.

Контроль направления с помощью CSS классов

Иногда удобнее управлять направлением через CSS-анимации, добавляя или удаляя классы при достижении сцены:

var classScene = new ScrollMagic.Scene({
    triggerElement: "#section5",
    triggerHook: 0.7
})
.setClassToggle("#box5", "animate-right")
.addTo(controller);

В CSS:

.animate-right {
    transform: translateX(300px);
    transition: transform 1s ease-in-out;
}

Преимущество метода:

  • Разделение логики анимации и скрипта.
  • Возможность легко управлять несколькими направлениями через разные CSS-классы.
  • Совместимость с любыми современными браузерами.

Параметр reverse для направления воспроизведения

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

var reverseScene = new ScrollMagic.Scene({
    triggerElement: "#section6",
    duration: 400,
    reverse: true
})
.setTween("#box6", {x: 200, ease: Linear.easeNone})
.addTo(controller);
  • reverse: true — анимация возвращается к исходной позиции при прокрутке обратно.
  • reverse: false — эффект срабатывает один раз и остаётся в финальном состоянии.

Использование Pin для закрепления элементов

Pin позволяет закрепить элемент на экране во время прокрутки и управлять анимацией вокруг него:

var pinScene = new ScrollMagic.Scene({
    triggerElement: "#section7",
    duration: 800
})
.setPin("#box7")
.setTween("#box7", {y: 300, rotation: 30, ease: Power2.easeInOut})
.addTo(controller);
  • Элемент остаётся видимым, пока сцена активна.
  • Плавное движение и вращение создают ощущение движения в фиксированной области.
  • Можно комбинировать с любыми направлениями x, y, scale, rotation.

Итоговый набор техник для разных направлений

  1. Вертикальные движения: y, opacity, triggerHook.
  2. Горизонтальные движения: x, CSS трансформации, параллакс.
  3. Глубина/масштаб: scale, прозрачность, CSS z-index.
  4. Комбинированные эффекты: любые комбинации x, y, scale, rotation.
  5. CSS-классы для направления: .animate-right, .animate-up, управление через setClassToggle.
  6. Управление обратным воспроизведением: reverse: true/false.
  7. Закрепление элементов: setPin, чтобы контролировать движение в ограниченном пространстве.

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

Оглавление