Пиннинг в горизонтальном режиме

В ScrollMagic пиннинг (pinning) позволяет закрепить элемент на экране на определённый промежуток прокрутки. В стандартном вертикальном режиме это достаточно просто: элемент фиксируется по вертикали на время действия сцены. Для горизонтального режима нужно учитывать изменения координат и направления прокрутки, поскольку по умолчанию ScrollMagic ориентирован на вертикальную прокрутку страницы.

Ключевой момент: горизонтальный пиннинг работает через преобразование оси прокрутки с y на x. Для этого необходимо использовать настройки сцены и контейнера с горизонтальной прокруткой.

var controller = new ScrollMagic.Controller({vertical: false});

Параметр vertical: false сообщает контроллеру, что основная ось прокрутки — горизонтальная. Все сцены, созданные этим контроллером, будут рассчитываться по горизонтальной оси.

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

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 500 // длина сцены по горизонтальной оси
})
.setPin("#pinnedElement")
.addTo(controller);

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

  • triggerElement — элемент, при котором начинается пиннинг. Он должен быть видимым в контейнере с горизонтальной прокруткой.
  • duration — длина сцены в пикселях по оси x. В горизонтальном режиме это определяет, насколько долго элемент остаётся закреплённым при прокрутке вправо.
  • Пиннинг автоматически учитывает начальную позицию элемента и смещает его по горизонтали, имитируя эффект «фиксированного» блока.

Управление смещением и отступами

При горизонтальном пиннинге часто требуется смещать элемент относительно начала сцены:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 600,
    offset: 100 // смещение относительно триггера
})
.setPin("#pinnedElement")
.addTo(controller);

Здесь:

  • offset задаёт расстояние от начала триггерного элемента, после которого начинается пиннинг.
  • Можно комбинировать offset и duration для создания плавных анимаций, когда элемент закрепляется постепенно.

Комбинирование с анимациями Tween

Для создания динамических эффектов пиннинг в горизонтальном режиме можно совмещать с анимациями через GSAP или другие tween-библиотеки:

var tween = gsap.to("#pinnedElement", {x: 300, rotation: 15, duration: 1});

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

Важные моменты:

  • x в GSAP указывает смещение по горизонтальной оси, что идеально сочетается с горизонтальным пиннингом ScrollMagic.
  • Анимация выполняется в течение всей сцены (duration) по мере прокрутки, создавая синхронный эффект движения и закрепления.

Вертикальный контент внутри горизонтального пина

Иногда требуется закрепить элемент горизонтально, но при этом внутри него остаётся вертикальный контент. Для этого нужно правильно настроить CSS контейнера:

#horizontalContainer {
    display: flex;
    overflow-x: scroll;
    height: 300px;
}

.pinnedElement {
    flex-shrink: 0;
    width: 200px;
}
  • Контейнер с горизонтальной прокруткой использует display: flex и overflow-x: scroll.
  • Пиннинг фиксирует элемент внутри этого контейнера, а вертикальный контент остаётся прокручиваемым.

Особенности работы с мобильно-адаптивными экранами

При горизонтальном пиннинге важно учитывать ширину экрана и устройства:

  • На узких экранах сцена может занимать больше прокрутки, чем предусмотрено в duration.
  • Для адаптивности можно рассчитывать duration динамически:
var sceneDuration = document.querySelector('#horizontalContainer').scrollWidth - window.innerWidth;

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

Пояснение: так сцена будет занимать ровно всю ширину контента, обеспечивая корректное закрепление элемента независимо от размера окна.

Проблемы и тонкости

  1. Переключение между вертикальной и горизонтальной прокруткой: контроллер должен быть один для каждой оси. Нельзя смешивать вертикальные и горизонтальные сцены в одном контроллере без дополнительных трюков.
  2. Прокрутка мышью и тач-события: на мобильных устройствах горизонтальная прокрутка может требовать специальных обработчиков touchmove.
  3. Переполнение контента: элементы, закрепленные в горизонтальном пиннинге, могут визуально «выпадать» из контейнера, если не задан overflow: hidden на родителе.

Продвинутая техника: множественный пиннинг

Можно закреплять несколько элементов одновременно, создавая горизонтальные «секции»:

var controller = new ScrollMagic.Controller({vertical: false});

var sections = document.querySelectorAll(".section");
sections.forEach(function(section, index) {
    new ScrollMagic.Scene({
        triggerElement: section,
        duration: 400
    })
    .setPin(section)
    .addTo(controller);
});
  • Каждый блок закрепляется на своей длине прокрутки.
  • Позволяет создавать горизонтальные карусели с эффектом параллакса и постепенного закрепления контента.

Интеграция с библиотеками скролл-анимации

ScrollMagic отлично работает с GSAP, Velocity.js и другими библиотеками. В горизонтальном пиннинге анимации могут быть синхронизированы с прокруткой:

  • setTween() управляет анимацией смещения или трансформаций.
  • setClassToggle() позволяет менять классы для запуска CSS-анимаций на определённом отрезке прокрутки.

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

Оглавление