Слайдшоу на скролле

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

Ключевые компоненты:

  • Controller — основной объект, который управляет всеми сценами на странице.
  • Scene — объект, задающий триггер, длительность и действия при достижении определенной позиции скролла.
  • Trigger Element — элемент на странице, при попадании которого активируется сцена.
  • Duration — длина сцены в пикселях или в процентах от высоты окна.

Принцип работы заключается в отслеживании позиции скролла относительно триггер-элемента и запуске привязанных анимаций.

Инициализация контроллера

Создание контроллера осуществляется очень просто:

var controller = new ScrollMagic.Controller();

Контроллер можно настраивать через опции:

  • globalSceneOptions — объект с настройками по умолчанию для всех сцен.
  • vertical — направление скролла (true по умолчанию).
  • refreshInterval — частота обновления позиции скролла для оптимизации производительности.

Создание сцены

Сцена создается с помощью конструктора ScrollMagic.Scene, где указываются основные параметры:

var scene = new ScrollMagic.Scene({
    triggerElement: "#slide1",
    duration: 500,
    offset: 0
})
.setTween("#slide1", {opacity: 1, y: -50})
.addTo(controller);

Пояснение параметров:

  • triggerElement — элемент, при появлении которого начинается сцена.
  • duration — длина сцены, определяет протяженность анимации.
  • offset — смещение от триггера.
  • setTween — задает анимацию с помощью библиотеки GSAP или CSS-свойств.
  • addTo(controller) — добавляет сцену в контроллер для отслеживания скролла.

Анимации с GSAP

Для плавного слайдшоу ScrollMagic идеально интегрируется с GSAP. Простейший пример анимации сдвига и изменения прозрачности:

var tween = gsap.to("#slide1", {duration: 1, y: -100, opacity: 0});
var scene = new ScrollMagic.Scene({
    triggerElement: "#slide1",
    duration: 300
})
.setTween(tween)
.addTo(controller);

Можно комбинировать несколько анимаций с помощью Timeline:

var timeline = gsap.timeline();
timeline
    .to("#slide1", {y: -50, opacity: 0})
    .to("#slide2", {y: -50, opacity: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#slides",
    duration: 600
})
.setTween(timeline)
.addTo(controller);

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

Параллакс-эффекты

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

var parallaxScene = new ScrollMagic.Scene({
    triggerElement: "#parallax",
    duration: 1000
})
.setTween("#background", {y: "50%", ease: Linear.easeNone})
.addTo(controller);

Особенности параллакса:

  • Длительность сцены определяет скорость движения слоя относительно скролла.
  • Используется ease: Linear.easeNone для равномерного смещения без ускорений.
  • Несколько слоев можно объединять в единую таймлайн-анимацию.

Управление сценами

Сцену можно контролировать динамически:

  • .triggerHook(value) — задает точку активации сцены относительно окна (0 — верх, 1 — низ).
  • .reverse(true/false) — определяет, должна ли анимация проигрываться в обратном направлении при скролле вверх.
  • .addIndicators({name: "Slide 1"}) — для отладки показывает визуальные индикаторы на странице.

Пример с настройкой триггер-хука и обратной анимации:

var scene = new ScrollMagic.Scene({
    triggerElement: "#slide1",
    duration: 500
})
.setTween("#slide1", {opacity: 1})
.triggerHook(0.5)
.reverse(true)
.addIndicators({name: "Slide1"})
.addTo(controller);

Ленивая загрузка и оптимизация

Для больших слайдшоу важно минимизировать нагрузку на рендеринг:

  • Использовать duration в процентах высоты окна вместо фиксированных пикселей для адаптивности.
  • Делать анимации с GPU-ускорением (transform: translate3d) вместо свойств top или left.
  • Добавлять сцены по мере необходимости через controller.addScene(scene) вместо создания всех сцен сразу.

Секвенции слайдов

Для полноценного слайдшоу удобно строить сцены последовательно:

var slides = document.querySelectorAll(".slide");
slides.forEach((slide, index) => {
    var scene = new ScrollMagic.Scene({
        triggerElement: slide,
        duration: "100%"
    })
    .setTween(gsap.fromTo(slide, {opacity: 0, y: 50}, {opacity: 1, y: 0}))
    .addTo(controller);
});

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

Интеграция с CSS-анимациями

ScrollMagic может запускать CSS-классы вместо JS-анимаций:

var scene = new ScrollMagic.Scene({
    triggerElement: "#slide3",
    duration: 400
})
.setClassToggle("#slide3", "visible")
.addTo(controller);

Преимущества CSS-анимаций:

  • Простота настройки через @keyframes.
  • Высокая производительность, особенно на мобильных устройствах.
  • Легкость синхронизации с другими визуальными эффектами.

Реализация «sticky» слайдов

Эффект «липкого» слайда достигается за счет использования pin:

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

Особенности использования pin:

  • Элемент фиксируется на время сцены.
  • Можно комбинировать с анимациями для плавного входа/выхода.
  • Подходит для слайдшоу с несколькими секциями на одну страницу.
Оглавление