Особенности горизонтальной прокрутки

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

Настройка контроллера для горизонтальной прокрутки

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

var controller = new ScrollMagic.Controller({
    vertical: false // отключение вертикальной оси
});

Ключевой момент: vertical: false переводит всю логику библиотеки в горизонтальное измерение, что влияет на расчёт позиции сцены, триггеров и длительности анимаций.

Создание сцены с горизонтальной анимацией

Сцена (ScrollMagic.Scene) определяет, когда и как элемент анимируется. Для горизонтальной прокрутки используются те же свойства, что и для вертикальной, но координаты смещаются по оси X.

var scene = new ScrollMagic.Scene({
    triggerElement: "#slide1", // элемент, при достижении которого срабатывает анимация
    duration: 500,             // длина сцены в пикселях по горизонтали
    triggerHook: 0.5           // положение триггера на экране (0 = верх/лево, 1 = низ/право)
})
.setTween("#animateBox", {x: 400}) // анимация по оси X
.addTo(controller);

Особенности:

  • duration в горизонтальной прокрутке измеряется в пикселях по ширине, а не по высоте.
  • Анимация через .setTween() должна учитывать x вместо y для смещения по горизонтали.
  • triggerHook остаётся относительным, но отсчитывается от левой границы окна.

Синхронизация с параллакс-эффектами

Для создания параллакса горизонтальные сцены часто используют TimelineMax или GSAP:

var tl = gsap.timeline();
tl.to("#bgLayer", {x: -200, ease: "power1.out"})
  .to("#fgLayer", {x: 200, ease: "power1.in"}, 0);

var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    duration: 1000
})
.setTween(tl)
.addTo(controller);

Примечания:

  • Параллакс требует согласованного движения нескольких слоёв по оси X.
  • Значения x могут быть как положительными, так и отрицательными, в зависимости от направления движения элементов.
  • Использование временной линии (timeline) обеспечивает синхронизацию нескольких анимаций на одной сцене.

Особенности триггерных элементов и «приклеивания» (pin)

ScrollMagic позволяет закреплять элемент на экране во время горизонтальной прокрутки с помощью свойства setPin:

var scene = new ScrollMagic.Scene({
    triggerElement: "#pinTrigger",
    duration: 800
})
.setPin("#pinnedElement")
.addTo(controller);

Замечания:

  • Закрепление элемента во время горизонтальной прокрутки перемещает его относительно левой границы, а не верхней.
  • Элемент будет оставаться «приклеенным» до тех пор, пока прокрутка по горизонтали не достигнет duration.
  • Для корректного расчёта часто требуется задать overflow-x: scroll на контейнере.

Контейнеры и стили для горизонтальной прокрутки

Для горизонтальной анимации важно правильно настроить HTML и CSS:

.container {
    width: 3000px; /* ширина всего контента */
    display: flex;
    flex-direction: row; /* горизонтальный порядок элементов */
}

.section {
    width: 100vw; /* каждый экран занимает всю ширину окна */
}

Рекомендации:

  • Использовать display: flex или grid для горизонтального расположения секций.
  • Контейнер должен иметь фиксированную ширину или быть прокручиваемым по оси X.
  • Для плавной анимации лучше избегать position: absolute на всех элементах, кроме анимируемых.

Взаимодействие с колесом мыши и тач-событиями

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

window.addEventListener('wheel', function(e){
    document.querySelector('.scroll-wrapper').scrollLeft += e.deltaY;
    e.preventDefault();
}, { passive: false });

Особенности:

  • Прокрутка с тачпада или мышью требует перенаправления deltaY в scrollLeft.
  • Без этого горизонтальные сцены не будут восприниматься пользователем как интерактивные.
  • ScrollMagic при этом корректно отслеживает позицию сцены по горизонтали.

Совместимость с адаптивным дизайном

  • Значения duration и triggerHook могут требовать пересчёта при изменении ширины окна.
  • Использование относительных единиц (vw) для ширины секций позволяет сохранить пропорции на разных устройствах.
  • Горизонтальные сцены лучше обновлять через controller.update(true) после ресайза:
window.addEventListener('resize', function(){
    controller.update(true);
});

Горизонтальная прокрутка в ScrollMagic открывает возможности для динамичных интерфейсов, но требует внимательной настройки контроллера, сцен, CSS-контейнеров и взаимодействия с пользователем. Правильное сочетание x-анимаций, pin и параллакса создаёт плавный и эффектный опыт прокрутки.

Оглавление