Принципы параллакса

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

Параллакс в ScrollMagic строится на трёх базовых принципах:

  1. Контроль позиции элемента относительно прокрутки ScrollMagic позволяет синхронизировать анимацию с текущей позицией скролла. Это достигается через объект Scene, который отслеживает момент входа или выхода элемента в видимую область:
var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 500, // продолжительность сцены в пикселях
    triggerHook: 0.5 // точка срабатывания (0 — верх экрана, 1 — низ)
})
.setTween("#element", {y: 200, ease: Linear.easeNone}) // анимация движения
.addTo(controller);
  • triggerElement — элемент, относительно которого отслеживается скролл.
  • duration — длина анимации; чем больше, тем плавнее перемещение элемента.
  • triggerHook — момент срабатывания сцены на экране.
  1. Создание слоёв для параллакса Эффект параллакса достигается за счёт движения нескольких элементов с разной скоростью. Обычно используют комбинацию CSS-трансформаций и ScrollMagic-сцен:
var tweenLayer1 = TweenMax.to("#layer1", 1, {y: -100, ease: Linear.easeNone});
var tweenLayer2 = TweenMax.to("#layer2", 1, {y: -50, ease: Linear.easeNone});

new ScrollMagic.Scene({
    triggerElement: "#parallaxSection",
    duration: "100%"
})
.setTween(tweenLayer1)
.addTo(controller);

new ScrollMagic.Scene({
    triggerElement: "#parallaxSection",
    duration: "100%"
})
.setTween(tweenLayer2)
.addTo(controller);
  • Элементы #layer1 и #layer2 двигаются с разной амплитудой.
  • Использование duration: "100%" позволяет сцена длиться столько, сколько длится видимая часть секции, обеспечивая плавность параллакса.
  1. Связь анимации с временной шкалой (Timeline) Для сложных эффектов удобно объединять несколько анимаций в TimelineMax или TimelineLite, которые затем привязываются к сцене ScrollMagic:
var timeline = new TimelineMax();
timeline
  .to("#layer1", 1, {y: -150, ease: Power1.easeInOut})
  .to("#layer2", 1, {y: -75, ease: Power1.easeInOut}, 0)
  .to("#layer3", 1, {y: -50, ease: Power1.easeInOut}, 0);

new ScrollMagic.Scene({
    triggerElement: "#parallaxSection",
    duration: "200%"
})
.setTween(timeline)
.addTo(controller);
  • Каждая анимация запускается с определённым смещением, обеспечивая синхронизацию движения разных слоёв.
  • Timeline позволяет управлять сложными последовательностями и точнее регулировать амплитуду и скорость движения.

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

  • Использование transform: translate3d вместо top/left Для плавной анимации рекомендуется трансформировать элементы через translate3d, так как это задействует аппаратное ускорение и уменьшает лаги:
.layer {
    transform: translate3d(0, 0, 0);
}

  • Минимизация числа одновременно анимируемых элементов Если на странице много слоёв, анимация может подтормаживать. Оптимально использовать 2–3 ключевых слоя для параллакса.

  • Отслеживание позиции с помощью triggerHook и duration Подбор оптимальных значений позволяет контролировать начало и конец движения, делая эффект естественным.

  • Использование pin для фиксации элементов Иногда требуется зафиксировать элемент на экране на время сцены:

new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 400
})
.setPin("#pinnedElement")
.addTo(controller);

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

Практические советы при создании параллакса

  • Сочетание различных скоростей и направлений движения создаёт более реалистичный эффект глубины.
  • Скролл должен быть плавным, поэтому анимации следует делать линейными (Linear.easeNone) для базового параллакса.
  • Тестирование на разных устройствах важно, так как мобильные браузеры могут иначе интерпретировать transform и scroll events.
  • Комбинирование с другими библиотеками анимации, такими как GSAP, расширяет возможности: поворот, масштабирование, прозрачность.

Закрепление знаний

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

  • Момент старта и окончания анимации (triggerElement, triggerHook, duration)
  • Амплитуду и скорость движения слоёв
  • Сложные последовательности через Timeline
  • Фиксацию элементов через pin для усиления глубины

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

Оглавление