Вертикальный и горизонтальный скролл

ScrollMagic — это мощная библиотека для управления скроллом и анимациями на веб-странице. Основная концепция заключается в создании сцен (Scenes), которые привязываются к положению скролла и управляют анимациями объектов с помощью контроллера (Controller). Контроллер следит за прокруткой и уведомляет сцены о её прогрессе.

Вертикальный скролл

Вертикальный скролл — наиболее распространённый тип взаимодействия со страницей. В ScrollMagic он реализуется по умолчанию. Основные элементы:

  1. Controller Создаётся один раз для всего документа:

    var controller = new ScrollMagic.Controller();

    По умолчанию контроллер отслеживает вертикальную прокрутку страницы.

  2. Scene Сцена определяет, при каком положении скролла должна запускаться анимация:

    var scene = new ScrollMagic.Scene({
    triggerElement: "#section1", // элемент, при котором активируется сцена
    duration: 300,               // продолжительность эффекта (в px)
    triggerHook: 0.5             // точка запуска: 0 – верх, 1 – низ
})
.setClassToggle("#animate1", "visible") // добавляет класс при активации
.addTo(controller);

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

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

  3. Pinning (фиксация элемента) Можно закреплять элемент на определённой позиции:

    var pinScene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: 500
})
.setPin("#pinElement")
.addTo(controller);

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

  4. Анимации с TweenMax / GSAP ScrollMagic легко интегрируется с GSAP для сложных анимаций:

    var tween = gsap.to("#box", {x: 200, rotation: 360, duration: 2});

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

    Здесь duration определяет растяжение анимации вдоль скролла.

Горизонтальный скролл

Хотя ScrollMagic ориентирован на вертикальный скролл, горизонтальные эффекты реализуются через CSS-трансформации контейнера и настройку контроллера:

  1. Создание горизонтального контейнера HTML структура:

    <div class="horizontal-container">
    <section class="panel">1</section>
    <section class="panel">2</section>
    <section class="panel">3</section>
</div>

    CSS:

    .horizontal-container {
    display: flex;
    width: 300%; /* три секции по 100% окна */
    overflow: hidden;
}
.panel {
    flex: 0 0 100%;
    height: 100vh;
}

  2. Настройка контроллера для горизонтального скролла Контроллер остаётся стандартным, но сцена управляет горизонтальным сдвигом через transform: translateX:

    var horizontalTween = gsap.to(".horizontal-container", {
    x: "-200%", // сдвиг на 2 панели
    ease: "none"
});

new ScrollMagic.Scene({
    triggerElement: ".horizontal-wrapper",
    triggerHook: "onLeave",
    duration: "300%"
})
.setPin(".horizontal-wrapper")
.setTween(horizontalTween)
.addTo(controller);

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

    • triggerHook: "onLeave" — сцена начинается, когда контейнер покидает верх окна.
    • duration > 100% — чтобы скролл растянулся на несколько экранов.
    • setPin удерживает контейнер на экране, создавая эффект горизонтальной прокрутки.

  3. Сочетание с вертикальными сценами Можно комбинировать вертикальный и горизонтальный скролл, разделяя контейнеры на разные сцены. Например:

    • Вертикальный скролл до блока.
    • Горизонтальная анимация внутри блока.
    • Возврат к вертикальному скроллу после завершения горизонтального.

Полезные техники

  • События сцены

    scene.on("enter", function() { console.log("вошли в сцену"); });
scene.on("leave", function() { console.log("вышли из сцены"); });
scene.on("progress", function(e) { console.log(e.progress); });

    Позволяет динамически управлять состоянием элементов.

  • Добавление классов и стилей setClassToggle и setTween — ключевые инструменты для анимации и изменения стилей в зависимости от прокрутки.

  • Процентное управление анимацией ScrollMagic позволяет задавать duration в процентах относительно высоты окна, что облегчает адаптивность.

  • Nested Scenes Вложенные сцены позволяют запускать отдельные анимации внутри основной сцены, сохраняя синхронизацию с прокруткой.

Практический совет

Для сложных интерфейсов часто используют комбинацию:

  • Вертикальный скролл — для навигации между блоками.
  • Горизонтальные сцены внутри блоков — для слайдовых презентаций, галерей, интерактивных секций.

Такой подход обеспечивает плавность и предсказуемость поведения элементов на странице.

Оглавление