Эффекты перехода между картинками

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

Создание сцены для анимации

В ScrollMagic анимация реализуется через объект Scene. Сцена определяет, когда и как происходят визуальные изменения. Для перехода между картинками обычно используется следующая структура:

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
    triggerElement: "#image-section", // элемент, который запускает анимацию
    duration: 500,                     // длина сцены в пикселях
    triggerHook: 0.5                   // точка срабатывания (0 — верх страницы, 1 — низ)
})
.setTween("#image1", {opacity: 0})     // анимация, изменяющая прозрачность первого изображения
.addTo(controller);

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

  • triggerElement задает элемент DOM, при скролле к которому начинается анимация.
  • duration контролирует протяженность анимации. Если указано 0, анимация произойдет мгновенно при достижении триггера.
  • triggerHook управляет точкой запуска относительно окна просмотра.

Плавное перекрытие изображений

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

const timeline = gsap.timeline();

timeline
  .to("#image1", {opacity: 0, duration: 1})
  .to("#image2", {opacity: 1, duration: 1}, "-=0.5"); // перекрытие на 0.5 секунды

const scene = new ScrollMagic.Scene({
    triggerElement: "#image-section",
    duration: 500,
    triggerHook: 0.5
})
.setTween(timeline)
.addTo(controller);

Важно: использование отрицательного значения смещения ("-=0.5") позволяет создать эффект наложения анимаций, делая переход более плавным.

Прокрутка как управление прогрессом анимации

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

const scene = new ScrollMagic.Scene({
    triggerElement: "#image-section",
    duration: window.innerHeight, // анимация длится на высоту окна
})
.setTween("#image1", {opacity: 0})
.addTo(controller);

При таком подходе анимация не привязана ко времени, а к положению скролла, что делает переход максимально плавным и естественным.

Параллакс-эффекты при смене изображений

Эффект параллакса добавляет глубину при скролле, создавая ощущение движения фона относительно переднего плана. Для картинок это может быть реализовано через изменение y-позиции:

const timeline = gsap.timeline();
timeline.to("#image2", {y: -100, opacity: 1, duration: 1});

const scene = new ScrollMagic.Scene({
    triggerElement: "#image-section",
    duration: 600
})
.setTween(timeline)
.addTo(controller);

Совет: комбинация прозрачности и вертикального смещения усиливает визуальное ощущение динамики и делает переходы более выразительными.

Логика цепочки переходов

Если нужно реализовать несколько последовательных переходов между картинками, рекомендуется использовать отдельные сцены для каждой пары изображений или один комплексный TimelineMax, объединяющий все анимации:

const timeline = gsap.timeline();
timeline
  .to("#image1", {opacity: 0, duration: 1})
  .to("#image2", {opacity: 1, duration: 1})
  .to("#image2", {opacity: 0, duration: 1})
  .to("#image3", {opacity: 1, duration: 1});

const scene = new ScrollMagic.Scene({
    triggerElement: "#gallery",
    duration: 1500
})
.setTween(timeline)
.addTo(controller);

Управление отзывчивостью

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

const scene = new ScrollMagic.Scene({
    triggerElement: "#image-section",
    duration: () => window.innerHeight, // адаптация к высоте окна
})
.setTween(timeline)
.addTo(controller);

Также следует обновлять контроллер при изменении размеров окна:

window.addEventListener("resize", () => {
    controller.update(true);
});

Сочетание с CSS-анимациями

Хотя ScrollMagic отлично работает с GSAP, также возможна интеграция с чистыми CSS-переходами через classToggle:

const scene = new ScrollMagic.Scene({
    triggerElement: "#image-section",
    duration: 500
})
.setClassToggle("#image2", "visible") // добавление класса с анимацией CSS
.addTo(controller);

CSS может содержать:

#image2 {
  opacity: 0;
  transition: opacity 1s ease;
}

#image2.visible {
  opacity: 1;
}

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

Оптимизация производительности

  • Использовать transform и opacity вместо свойств, вызывающих перерисовку (top, left, width).
  • Ограничивать количество одновременно активных сцен.
  • При работе с большим количеством изображений использовать спрайты или ленивую загрузку, чтобы уменьшить нагрузку на рендеринг.

Выводы по построению эффектов

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

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

Оглавление