Адаптивные изображения

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

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

Контроллер ScrollMagic

Для начала необходимо создать контроллер:

var controller = new ScrollMagic.Controller();

Контроллер может быть вертикальным или горизонтальным, что задается через опцию vertical: true|false. По умолчанию прокрутка вертикальная.

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

Контроллер управляет всеми сценами на странице и позволяет синхронизировать анимации с прокруткой.

Создание сцены для изображения

Сцена привязывается к элементу и задает диапазон прокрутки, в котором происходят изменения:

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

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

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

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

Адаптивность через медиазапросы

Адаптивные изображения требуют разных стилей и анимаций для различных устройств. ScrollMagic совместим с медиазапросами:

if(window.matchMedia("(max-width: 768px)").matches){
    var scene = new ScrollMagic.Scene({
        triggerElement: "#image-section",
        duration: 300
    })
    .setTween("#image", {scale: 1.2})
    .addTo(controller);
} else {
    var scene = new ScrollMagic.Scene({
        triggerElement: "#image-section",
        duration: 500
    })
    .setTween("#image", {scale: 1.5})
    .addTo(controller);
}

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

Параллакс эффект для изображений

Параллакс создается с помощью смещения элементов при прокрутке. Для изображения это может быть сдвиг по вертикали или горизонтали:

var parallaxScene = new ScrollMagic.Scene({
    triggerElement: "#parallax-section",
    triggerHook: 1,
    duration: "200%"
})
.setTween("#parallax-image", {y: "50%", ease: Linear.easeNone})
.addTo(controller);
  • duration: "200%" — означает, что анимация растянута на 2 экрана по высоте.
  • y: "50%" — изображение смещается на 50% своей высоты.
  • Linear.easeNone — движение без ускорения, чтобы эффект был плавным.

Подгрузка изображений для разных разрешений

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

<picture>
    <source media="(max-width: 768px)" srcset="image-small.jpg">
    <source media="(max-width: 1200px)" srcset="image-medium.jpg">
    <img src="image-large.jpg" alt="Example">
</picture>

При прокрутке ScrollMagic можно управлять классами или анимациями для <picture>:

var responsiveScene = new ScrollMagic.Scene({
    triggerElement: "#responsive-image",
    duration: 400
})
.on("enter", function () {
    document.querySelector("#responsive-image img").classList.add("active");
})
.on("leave", function () {
    document.querySelector("#responsive-image img").classList.remove("active");
})
.addTo(controller);

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

Интеграция с GSAP для сложных эффектов

ScrollMagic хорошо работает с GSAP (GreenSock Animation Platform) для плавной анимации изображений:

var tween = gsap.to("#image", {scale: 1.5, rotation: 15, duration: 1});

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

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

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

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

  1. Ленивая загрузка через loading="lazy" для <img>.
  2. Минимизация длительности анимаций на мобильных устройствах.
  3. Использование will-change для GPU-ускорения анимаций.
#image {
    will-change: transform, opacity;
}
  1. Отказ от тяжелых фильтров и больших изображений на маленьких экранах.

Ключевые рекомендации

  • Использовать triggerHook и duration для плавной синхронизации анимации с прокруткой.
  • Применять медиазапросы для изменения анимации под разные устройства.
  • Комбинировать ScrollMagic с GSAP для более сложных эффектов.
  • Подгружать изображения через <picture> и lazy-loading для экономии трафика.
  • Контролировать производительность на мобильных устройствах через will-change и уменьшение объема анимаций.

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

Оглавление