Zoom-эффекты

Zoom-эффекты позволяют создавать динамическое масштабирование элементов при прокрутке страницы, что усиливает визуальное восприятие контента. В ScrollMagic они реализуются через сочетание сцен (Scenes) и анимаций, чаще всего с помощью библиотеки GSAP (GreenSock Animation Platform) для управления трансформациями.

Создание сцены с масштабированием

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

var controller = new ScrollMagic.Controller();

Далее определяется сцена, в которой будет происходить масштабирование элемента:

var scene = new ScrollMagic.Scene({
    triggerElement: "#zoom-target", // Элемент, при достижении которого начинается анимация
    duration: 500,                  // Длительность эффекта в пикселях прокрутки
    triggerHook: 0.5                // Точка срабатывания анимации (0 - верх страницы, 1 - низ)
});

Связывание сцены с анимацией

Для эффекта увеличения или уменьшения элемента используется GSAP:

var tween = gsap.to("#zoom-target", {
    scale: 2,          // Финальный масштаб
    ease: "power1.inOut"
});

scene.setTween(tween)
     .addTo(controller);

В этом примере элемент с id zoom-target плавно увеличится в два раза при прокрутке, начиная с середины экрана и в течение 500 пикселей прокрутки.

Настройка направления и динамики масштабирования

Тонкая настройка масштаба достигается через:

  • scale – конечный коэффициент увеличения или уменьшения.
  • ease – тип плавности перехода (например, power1.in, power2.out, linear).
  • duration – длина прокрутки, на которой будет происходить эффект.

Пример обратного эффекта (уменьшение при прокрутке вниз):

gsap.to("#zoom-target", {
    scale: 0.5,
    ease: "power2.out"
});

Связывание нескольких анимаций с одной сценой

Можно комбинировать масштабирование с другими свойствами CSS, например, с opacity или rotation:

var tween = gsap.to("#zoom-target", {
    scale: 1.5,
    rotation: 15,
    opacity: 0.7,
    ease: "power1.inOut"
});

scene.setTween(tween).addTo(controller);

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

Параллакс-эффект с масштабированием

Для создания параллакс-эффекта элемент можно перемещать по оси Y и масштабировать одновременно:

var tween = gsap.to("#zoom-target", {
    y: -100,      // Сдвиг вверх
    scale: 1.3,   // Увеличение
    ease: "power2.out"
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#zoom-section",
    duration: 600,
    triggerHook: 0.3
}).setTween(tween).addTo(controller);

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

Использование Pinning с масштабированием

Pinning фиксирует элемент на экране на время анимации:

var scene = new ScrollMagic.Scene({
    triggerElement: "#zoom-target",
    duration: 400,
    triggerHook: 0.2
})
.setPin("#zoom-target") // Фиксирует элемент
.setTween(gsap.to("#zoom-target", { scale: 2, ease: "power1.inOut" }))
.addTo(controller);

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

Контроль обратного масштабирования

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

  • .reverse(false) – запрещает обратное проигрывание.
  • .offset(value) – смещает начало триггера относительно элемента.
  • .setClassToggle(element, className) – динамически добавляет CSS-класс для управления стилями масштаба через CSS-анимации.

Практические советы по Zoom-эффектам

  • Для плавного эффекта избегать слишком больших значений scale, обычно оптимально 1.2–2.0.
  • Совмещать с ease из GSAP для естественного ощущения приближения/удаления.
  • Использовать duration, соответствующую длине блока контента, чтобы анимация не выглядела резкой.
  • Pinning особенно эффективен для крупных визуальных блоков, таких как баннеры или иллюстрации.

Подключение ScrollMagic и GSAP

Библиотеки подключаются следующим образом:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

Только после этого создаются контроллеры и сцены с zoom-эффектами.

Итоговая структура кода

var controller = new ScrollMagic.Controller();

var tween = gsap.to("#zoom-target", {
    scale: 1.8,
    rotation: 10,
    ease: "power2.inOut"
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#zoom-section",
    duration: 500,
    triggerHook: 0.4
})
.setPin("#zoom-target")
.setTween(tween)
.addTo(controller);

Этот подход объединяет масштабирование, поворот, фиксацию элемента и плавность анимации, создавая полноценный динамический Zoom-эффект на странице.

Оглавление