Скорость движения слоев

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

Настройка сцены и триггера

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

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

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

var controller = new ScrollMagic.Controller();

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

Здесь слой с id="layer1" будет перемещаться по оси Y на 200 пикселей, пока сцена активна, с линейной скоростью.

Контроль скорости через длительность сцены

Скорость движения элемента определяется соотношением между duration сцены и расстоянием, на которое должен двигаться элемент.

Формула для расчета скорости:

[ v = ]

где Δy — смещение элемента, duration — длина сцены в пикселях прокрутки. Увеличение duration уменьшает скорость движения элемента, а уменьшение duration — увеличивает.

Использование Tween для плавного движения

Для более тонкого управления движением применяются библиотеки анимации, такие как GSAP. В ScrollMagic они используются через метод .setTween().

Пример параллакса с разной скоростью:

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

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

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

Использование свойства data-speed для динамического управления

Для удобства можно задавать скорость слоя через атрибут data-speed и вычислять смещение автоматически:

document.querySelectorAll(".parallax-layer").forEach(function(layer){
    var speed = parseFloat(layer.getAttribute("data-speed"));
    var scene = new ScrollMagic.Scene({
        triggerElement: layer,
        duration: window.innerHeight
    })
    .setTween(layer, {y: speed * window.innerHeight, ease: Linear.easeNone})
    .addTo(controller);
});

Здесь speed — коэффициент скорости, где 1 соответствует стандартной прокрутке, 0.5 — половинной скорости, 2 — двойной.

Контроль скорости через обратные анимации

Для создания эффекта замедленного движения при скролле вверх используется свойство reverse. По умолчанию оно равно true, что позволяет сцене «отматываться» при прокрутке вверх.

var scene = new ScrollMagic.Scene({
    triggerElement: "#layer3",
    duration: 400,
    reverse: true
})
.setTween("#layer3", {y: 100, ease: Linear.easeNone})
.addTo(controller);

Если reverse отключить (false), слой будет двигаться только при скролле вниз и останется в конечной позиции при обратной прокрутке.

Совмещение нескольких слоев с разными скоростями

Для создания сложных композиций параллакса можно объединять несколько слоев с разной длительностью и смещением.

var layers = [
    {element: "#bg", y: 50, duration: 1200},
    {element: "#mid", y: 150, duration: 800},
    {element: "#fg", y: 300, duration: 400}
];

layers.forEach(function(layer){
    new ScrollMagic.Scene({
        triggerElement: layer.element,
        duration: layer.duration
    })
    .setTween(layer.element, {y: layer.y, ease: Linear.easeNone})
    .addTo(controller);
});

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

Поддержка отзывчивого дизайна

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

window.addEventListener('resize', function(){
    controller.destroy(true);
    controller = new ScrollMagic.Controller();
    initScenes(); // функция, заново создающая сцены с пересчитанными параметрами
});

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

Итоговые рекомендации по скорости

  • Малые значения duration → быстрые анимации.
  • Большие значения duration → плавные медленные движения.
  • Разные duration для слоев → создание параллакс-эффекта.
  • data-speed или коэффициенты → простой способ масштабировать движение без изменения кода сцены.
  • Использовать Linear.easeNone для линейной скорости без ускорений и замедлений, что делает движение синхронизированным с прокруткой.

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

Оглавление