Ретина-дисплеи

Retina-дисплеи (и другие экраны с высокой плотностью пикселей, High DPI) характеризуются увеличенным количеством физических пикселей на единицу площади. Это приводит к более чёткому отображению графики, но одновременно предъявляет повышенные требования к качеству визуальных ресурсов и точности анимаций.

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

Ключевая характеристика — devicePixelRatio (DPR):

window.devicePixelRatio

Значение:

  • 1 — стандартные дисплеи
  • 2 и выше — Retina / High DPI

Проблемы при работе с Retina-дисплеями

1. Размытие изображений

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

Особенно это заметно при:

  • параллакс-эффектах
  • масштабировании (scale)
  • закреплённых сценах (pin в ScrollMagic)

2. Неточность позиционирования

ScrollMagic рассчитывает позиции элементов на основе CSS-пикселей. При дробных значениях и трансформациях возможны:

  • «дёргание» анимации
  • микро-смещения
  • потеря резкости текста

3. Производительность

Высокая плотность пикселей увеличивает нагрузку:

  • больше пикселей для рендеринга
  • сложнее GPU-обработка трансформаций
  • выше требования к оптимизации

Подготовка графики для Retina

Использование изображений с двойным разрешением

Рекомендуется использовать изображения в 2x (или 3x) размере:

<img src="image@2x.png" width="500" height="300">

Или через srcset:

<img 
  src="image.png"
  srcset="image@2x.png 2x, image@3x.png 3x"
  alt=""
>

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

Использование SVG

SVG идеально подходит для ScrollMagic-анимаций:

  • масштабируется без потери качества
  • лёгкий вес
  • удобно анимируется (в том числе через GSAP)
<svg width="100%" height="100%">
  <circle cx="50" cy="50" r="40" />
</svg>

Оптимизация анимаций ScrollMagic под Retina

Использование transform вместо position

Анимации через transform:

  • быстрее обрабатываются GPU
  • сохраняют чёткость на Retina

Пример с GSAP:

gsap.to(".box", {
  x: 100,
  y: 50,
  scale: 1.2
});

Вместо:

// менее эффективно
element.style.left = "100px";

Привязка к пиксельной сетке

Для избежания размытия:

x: Math.round(value)

Или:

gsap.to(".box", {
  x: Math.round(100.5)
});

Это особенно важно для текста и тонких линий.

Работа с ScrollMagic.Scene

Точная настройка triggerHook

new ScrollMagic.Scene({
  triggerElement: "#trigger",
  triggerHook: 0.5
})

На Retina-дисплеях дробные значения могут вызывать нестабильность. Иногда предпочтительно использовать:

triggerHook: 0
// или
triggerHook: 1

для более предсказуемого поведения.

Закрепление элементов (pin) и Retina

Метод setPin() может вызывать проблемы:

scene.setPin(".element");

Возможные артефакты:

  • размытие текста
  • «дрожание» при прокрутке

Решения:

  1. Добавление transform: translateZ(0)
.element {
  transform: translateZ(0);
}
  1. Использование will-change
.element {
  will-change: transform;
}
  1. Принудительное включение GPU
.element {
  transform: translate3d(0, 0, 0);
}

Работа с Canvas в ScrollMagic

Canvas требует отдельного внимания:

Учет devicePixelRatio

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const dpr = window.devicePixelRatio || 1;

canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;

ctx.scale(dpr, dpr);

Без этого Canvas будет выглядеть размытым.

Видео и фоновые эффекты

При использовании видео в ScrollMagic:

scene.setTween(video, { currentTime: 10 });

Важно:

  • использовать видео высокого разрешения (например, 4K)
  • учитывать нагрузку на GPU

Параллакс и Retina

Параллакс-эффекты особенно чувствительны к качеству:

gsap.to(".bg", {
  y: "-50%"
});

Рекомендации:

  • использовать изображения большего размера, чем viewport
  • избегать масштабирования вверх (scale > 1), если исходник маленький
  • применять background-size: cover

Тонкости работы с текстом

Текст может терять чёткость при анимациях:

Проблема:

gsap.to(".text", {
  scale: 1.1
});

На Retina:

  • текст становится слегка размытым

Решения:

  1. Анимация opacity вместо scale:
gsap.to(".text", {
  opacity: 0.5
});
  1. Использование transform-origin:
transform-origin: center center;
  1. Ограничение масштабирования:
scale: 1.02

Медиа-запросы для High DPI

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  .image {
    background-image: url("image@2x.png");
  }
}

Позволяет подгружать более качественные ресурсы.

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

Минимизация repaint/reflow

ScrollMagic часто обновляет состояние при прокрутке. На Retina это дороже.

Рекомендации:

  • избегать изменения layout-свойств (width, height, top)
  • использовать transform и opacity

Ограничение количества сцен

new ScrollMagic.Scene(...)

Большое количество сцен:

  • увеличивает нагрузку
  • ухудшает плавность

Лучше объединять анимации.

Дебаг и визуальный контроль

Использование индикаторов:

scene.addIndicators();

На Retina они выглядят иначе:

  • тонкие линии могут казаться размытыми
  • полезно для проверки точности позиционирования

Практические рекомендации

  • Всегда использовать изображения с запасом по разрешению
  • Предпочитать SVG и Canvas с учетом DPR
  • Анимировать через transform
  • Избегать дробных пикселей
  • Оптимизировать количество сцен
  • Тестировать на реальных Retina-устройствах

Типичные ошибки

Ошибка: использование обычных PNG Результат: размытые параллакс-слои

Ошибка: анимация через left/top Результат: лаги и дергание

Ошибка: игнорирование devicePixelRatio в Canvas Результат: мыльная графика

Ошибка: масштабирование маленьких изображений Результат: потеря качества

Связка ScrollMagic + GSAP для Retina

Оптимальный стек:

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  triggerElement: ".section",
  duration: 500
})
.setTween(
  gsap.to(".box", {
    x: 200,
    force3D: true
  })
)
.addTo(controller);

force3D: true:

  • включает аппаратное ускорение
  • улучшает качество на Retina

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

Контрольные признаки корректной работы:

  • текст остаётся резким при анимации
  • отсутствуют «дёргания»
  • изображения не теряют чёткость
  • плавность прокрутки сохраняется

Наличие хотя бы одного отклонения указывает на необходимость оптимизации под High DPI.

Оглавление