Многослойный параллакс

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

// Создание контроллера для всех сцен
var controller = new ScrollMagic.Controller();

Контроллер управляет всеми сценами и обеспечивает синхронизацию анимаций с прокруткой страницы.

Настройка слоёв и сцены

Каждый слой параллакса реализуется с помощью HTML-элемента, которому присваивается CSS-класс. Например:

<div class="parallax-layer layer-back"></div>
<div class="parallax-layer layer-middle"></div>
<div class="parallax-layer layer-front"></div>

Для анимации используется библиотека GSAP или стандартные CSS-трансформации. В ScrollMagic сцена задаёт момент появления анимации, её длительность и триггер:

var sceneBack = new ScrollMagic.Scene({
    triggerElement: "#parallax-container",
    duration: "200%", // продолжительность анимации при прокрутке
    triggerHook: 0
})
.setTween(".layer-back", {y: "50%", ease: Linear.easeNone})
.addTo(controller);

Ключевые параметры сцены:

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

Параллакс с разной скоростью слоёв

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

var sceneMiddle = new ScrollMagic.Scene({
    triggerElement: "#parallax-container",
    duration: "200%",
    triggerHook: 0
})
.setTween(".layer-middle", {y: "30%", ease: Linear.easeNone})
.addTo(controller);

var sceneFront = new ScrollMagic.Scene({
    triggerElement: "#parallax-container",
    duration: "200%",
    triggerHook: 0
})
.setTween(".layer-front", {y: "10%", ease: Linear.easeNone})
.addTo(controller);

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

Анимация при прокрутке без GSAP

Можно обойтись и чистым CSS с ScrollMagic. Для этого сцена лишь добавляет класс к элементу:

var scene = new ScrollMagic.Scene({
    triggerElement: "#parallax-container",
    duration: "100%",
    triggerHook: 0.5
})
.setClassToggle(".layer-front", "animate")
.addTo(controller);

В CSS задаётся плавная трансформация:

.layer-front.animate {
    transform: translateY(-50%);
    transition: transform 0.5s linear;
}

Этот подход полезен для лёгких эффектов без подключения GSAP.

Сложный многослойный параллакс

Для полной сцены параллакса можно комбинировать несколько слоёв и анимаций. Например, фон движется медленно, средний слой чуть быстрее, а передний слой — почти синхронно с прокруткой.

var layers = [
    {selector: ".layer-back", y: "40%"},
    {selector: ".layer-middle", y: "20%"},
    {selector: ".layer-front", y: "5%"}
];

layers.forEach(function(layer) {
    new ScrollMagic.Scene({
        triggerElement: "#parallax-container",
        duration: "300%",
        triggerHook: 0
    })
    .setTween(layer.selector, {y: layer.y, ease: Linear.easeNone})
    .addTo(controller);
});

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

Триггерные эффекты и обратная анимация

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#parallax-container",
    duration: "200%",
    triggerHook: 0
})
.setTween(".layer-back", {y: "50%", ease: Linear.easeNone})
.reverse(true) // анимация откатывается при скролле вверх
.addTo(controller);

Параметр .reverse(true) обеспечивает естественный эффект возврата слоёв, создавая ощущение объёмного пространства.

Сочетание с анимациями объектов

Параллакс можно совмещать с анимациями объектов внутри слоёв. Например, текст или изображения могут появляться, увеличиваться или вращаться во время прокрутки. Это делается через .setTween() или .setClassToggle() для отдельного элемента, что даёт гибкость в управлении эффектами.

new ScrollMagic.Scene({
    triggerElement: ".layer-front",
    duration: "100%",
    triggerHook: 0.8
})
.setTween(".layer-front .title", {opacity: 1, y: 0, ease: Linear.easeNone})
.addTo(controller);

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

  • Оптимизация: ограничивать количество одновременно анимируемых слоёв, чтобы не перегружать рендеринг.
  • Производительность: использовать CSS transform вместо top/left для плавного GPU-ускоренного движения.
  • Синхронизация: для сложных сцен полезно использовать единый controller для всех слоёв.
  • Мобильные устройства: проверять производительность и при необходимости уменьшать длительность анимации или количество слоёв.

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

Оглавление