Параллакс фона

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

Создание сцены параллакса

Для реализации параллакса необходимо создать сцену (Scene) и связать её с элементом DOM, фоновое движение которого будет контролироваться. Базовый пример структуры сцены:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1", // Элемент, при достижении которого начинается анимация
    duration: "200%",            // Длительность эффекта параллакса
    triggerHook: 0               // Начало анимации при верхней границе viewport
})
.setTween("#section1 .background", {y: "50%", ease: Linear.easeNone}) // анимация фона
.addTo(controller);
  • triggerElement — элемент, который запускает анимацию при его попадании в viewport.
  • duration — длина сцены, определяющая диапазон прокрутки, в течение которого будет происходить эффект.
  • triggerHook — точка запуска анимации относительно viewport (0 — верх, 1 — низ, 0.5 — середина).
  • setTween — связывает сцену с анимацией, управляемой библиотекой GSAP или CSS свойствами.

Настройка скорости параллакса

Скорость движения фона регулируется через величину смещения по оси Y или X. Например:

.setTween("#section1 .background", {y: "-30%", ease: Linear.easeNone});

Отрицательные значения создают движение фона вверх при прокрутке вниз, положительные — вниз. Важно использовать Linear.easeNone, чтобы анимация была равномерной, без ускорений и замедлений.

Несколько слоёв фона

Параллакс часто требует разных слоёв с разной скоростью:

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "150%"
})
.setTween("#layer1", {y: "20%", ease: Linear.easeNone})
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "150%"
})
.setTween("#layer2", {y: "40%", ease: Linear.easeNone})
.addTo(controller);

Так создаётся эффект глубины: ближний слой движется быстрее, дальний — медленнее.

Использование pin для закрепления секций

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

new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "100%",
    triggerHook: 0
})
.setPin("#section1") // фиксируем элемент
.addTo(controller);

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

Интеграция с GSAP

Для сложных параллакс-анимаций предпочтительно использовать GSAP. Это позволяет плавно менять свойства фона, прозрачность, масштаб и даже трансформации 3D:

var tween = gsap.timeline()
    .to("#bg1", {y: "50%", scale: 1.1, ease: "none"})
    .to("#bg2", {y: "30%", scale: 1.05, ease: "none"}, 0);

new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "200%"
})
.setTween(tween)
.addTo(controller);

Использование timeline даёт возможность синхронизировать несколько элементов с разными параметрами движения, создавая эффект многослойного параллакса.

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

  • Избегать чрезмерной длины сцены — слишком длинный параллакс может быть неприятен пользователю.
  • Сохранять линейное движение — резкие ускорения фона выглядят неестественно.
  • Проверять адаптивность — на мобильных устройствах эффекты могут требовать уменьшения скорости или отключения.
  • Минимизировать нагрузку — несколько слоёв с тяжелыми изображениями могут замедлять прокрутку.

Пример сочетания параллакса с контентом

var controller = new ScrollMagic.Controller();

gsap.to("#background", {
    y: "40%", 
    ease: "none", 
    scrollTrigger: {
        trigger: "#section1",
        start: "top top",
        end: "bottom top",
        scrub: true
    }
});

new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "100%",
})
.setPin("#content") // фиксируем текст поверх фона
.addTo(controller);

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

Этот подход позволяет комбинировать ScrollMagic и GSAP, создавая динамичные, плавные и профессиональные параллакс-эффекты.

Оглавление