Последовательности изображений

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

Для начала необходимо подготовить набор изображений, которые будут составлять последовательность. Обычно это серия кадров в формате PNG или JPG, расположенных в порядке воспроизведения:

const images = [];
for (let i = 1; i <= 30; i++) {
  images.push(`images/frame_${i}.png`);
}

Настройка контейнера и элемента для последовательности

Создается контейнер, в котором будет отображаться текущий кадр:

<div id="animation-container">
  <img id="sequence-frame" src="images/frame_1.png" />
</div>

CSS контейнера должен обеспечивать правильное позиционирование и размеры:

#animation-container {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}

#sequence-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

Для управления последовательностью используется сцена ScrollMagic. В сцене задаются три ключевых параметра:

  • triggerElement — элемент, при достижении которого начинается анимация.
  • duration — длина прокрутки, в течение которой будет воспроизводиться вся последовательность.
  • triggerHook — точка на экране, при которой срабатывает сцена (0 — верх экрана, 1 — низ).
const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: "#animation-container",
  duration: 1000,
  triggerHook: 0
})
.addTo(controller);

Управление кадрами в зависимости от прокрутки

Для плавной смены кадров используется событие progress сцены. Оно возвращает значение от 0 до 1, которое пропорционально пройденной части сцены. На основе этого значения вычисляется индекс кадра:

const frameElement = document.getElementById("sequence-frame");

scene.on("progress", function(event) {
  const progress = event.progress;
  const frameIndex = Math.min(
    images.length - 1,
    Math.floor(progress * images.length)
  );
  frameElement.src = images[frameIndex];
});

Оптимизация загрузки изображений

Чтобы избежать задержек при первой прокрутке, рекомендуется предварительно подгрузить все кадры:

const preloadedImages = [];
images.forEach(src => {
  const img = new Image();
  img.src = src;
  preloadedImages.push(img);
});

Использование предзагрузки гарантирует, что при смене кадров не будет мигания или задержек.

Расширение анимации с помощью TweenMax или GSAP

ScrollMagic тесно интегрируется с библиотекой GSAP, что позволяет добавлять дополнительные эффекты. Например, можно анимировать прозрачность или масштаб текущего кадра одновременно со сменой изображений:

scene.setTween(
  gsap.to("#sequence-frame", { opacity: 1, scale: 1.05, ease: "power1.inOut" })
);

Поддержка разных разрешений и адаптивность

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

const deviceImages = window.innerWidth < 768 ? mobileImages : desktopImages;

Создание эффектов обратного воспроизведения

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

scene.on("progress", function(event) {
  const frameIndex = Math.floor(event.progress * images.length);
  frameElement.src = images[frameIndex];
});

Комбинирование с параллакс-эффектами

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

scene.setTween(
  gsap.to("#animation-container", { y: "-50%", ease: "none" })
);

Использование Canvas для высокой производительности

Для больших последовательностей и высокой частоты кадров рекомендуется использовать <canvas>. Это снижает нагрузку на DOM и позволяет плавно отрисовывать сотни кадров:

const canvas = document.getElementById("sequence-canvas");
const context = canvas.getContext("2d");
const img = new Image();

scene.on("progress", function(event) {
  const frameIndex = Math.floor(event.progress * images.length);
  img.src = images[frameIndex];
  img.onl oad = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
  };
});

Использование Canvas особенно актуально для сложных анимаций и больших файлов изображений, обеспечивая более стабильный FPS при прокрутке.

Вывод

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

Оглавление