Лекция 7: Интерактивная графика и мультимедиа
1 / 20
🎬

Интерактивная графика и мультимедиа

Пост-Flash эпоха: CSS, Lottie, Rive, видео

Концептуальное проектирование сайтов

2 / 20

Пост-Flash эпоха

Flash умер в 2020. Новые инструменты в 100 раз мощнее, легче и безопаснее.
🎨 CSS-анимации
Простые переходы и эффекты интерфейса
🎭 Lottie
Сложные векторные анимации (иллюстрации, иконки)
🎮 Rive
Интерактивные анимации с реакцией на пользователя
Главное правило 2026: любая анимация должна обосновываться UX-задачей, а не просто «украшать» сайт.
3 / 20

CSS Transitions

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

.button { background-color: #3498db; transition: all 0.3s ease; } .button:hover { background-color: #2980b9; transform: scale(1.05); }
Наведи на меня
4 / 20

CSS Keyframes

Полноценная анимация с несколькими состояниями

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .element { animation: pulse 2s infinite; }
5 / 20

Производительность CSS-анимаций

Золотое правило: анимируйте только transform и opacity

❌ Плохо

  • left, top
  • width, height
  • margin, padding
  • Вызывает перерисовку всей страницы

✅ Хорошо

  • transform (scale, translate, rotate)
  • opacity
  • Обрабатывается GPU
  • Работает плавно на любых устройствах
6 / 20

Lottie

Векторные анимации от Airbnb

After Effects → JSON → Плавная анимация в браузере
📦 Малый вес
10-100 КБ
В 10-100 раз легче GIF
🎯 Векторная графика
Идеальная чёткость на любом экране (Retina, 4K)
🌐 Кроссплатформенность
Один файл: web, iOS, Android
⚡ Интерактивность
Управление через JavaScript
7 / 20

Lottie в коде

<div id="animation"></div> <script src="lottie.min.js"></script> <script> const anim = lottie.loadAnimation({ container: document.getElementById('animation'), renderer: 'svg', loop: true, autoplay: true, path: 'animation.json' }); </script>
Где брать: lottiefiles.com — тысячи бесплатных анимаций
8 / 20

Rive

Интерактивные анимации нового поколения

Параметр Lottie Rive
Формат JSON (текст) Бинарный (.riv)
Интерактивность Через внешний JS Встроена (State Machines)
Размер файла Больше Меньше
Производительность Хорошая Отличная (GPU)
State Machines — анимация реагирует на действия пользователя без кода
9 / 20

CSS vs Lottie vs Rive

Критерий CSS Lottie Rive
Вес файла 0 КБ 10-100 КБ 5-50 КБ
Интерактивность Только CSS Через JS Встроенная
Лучше для Hover-эффекты Иконки, лоадеры Маскоты, игры
Правило выбора: CSS → Lottie → Rive (по возрастанию сложности)
10 / 20

Форматы видео

Формат Кодек Поддержка Когда использовать
MP4 (H.264) H.264 99% Универсальный фоллбэк
WebM (VP9) VP9 97% Хорошая альтернатива
WebM (AV1) AV1 92% Золотой стандарт 2026
MOV Разные Ограниченная ❌ Не для веба
11 / 20

Тег <video>

<video width="800" height="450" controls autoplay muted loop playsinline preload="metadata" poster="poster.jpg"> <source src="video.av1.mp4" type='video/mp4; codecs="av01"'> <source src="video.webm" type="video/webm"> <source src="video.h264.mp4" type="video/mp4"> </video>
Ключевые атрибуты: muted (обязательно для autoplay), playsinline (для iOS), poster (превью)
12 / 20

Фоновое видео: правила

  • Всегда без звука (muted)
  • Короткое (10-30 сек, зацикленное)
  • Лёгкое (максимум 3-5 МБ для HD)
  • С playsinline для iOS
  • С preload="none" или "metadata"
  • С альтернативой (постер или картинка)
  • На мобильных видео не загружается
13 / 20

Форматы аудио

Формат Сжатие Поддержка Когда использовать
MP3 С потерями 100% Универсальный фоллбэк
AAC (M4A) С потерями 98% Лучше MP3
Opus С потерями 95% Лучший формат 2026
WAV Без потерь 100% ❌ Только исходники
14 / 20

Core Web Vitals

LCP
Largest Contentful Paint
≤ 2.5 сек
FID
First Input Delay
≤ 100 мс
CLS
Cumulative Layout Shift
≤ 0.1
Любая графика, видео и анимация влияют на эти метрики. Google учитывает их при ранжировании.
15 / 20

Lazy-loading

Загружаем только нужное

<!-- Для изображений --> <img src="photo.webp" loading="lazy"> <!-- Для iframe --> <iframe src="youtube.com/..." loading="lazy"></iframe>
⚠️ Никогда не используйте loading="lazy" для изображений выше первого экрана (LCP)!
16 / 20

Preload критических ресурсов

<!-- Предзагрузка шрифта --> <link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin> <!-- Предзагрузка критического изображения --> <link rel="preload" href="hero.avif" as="image" type="image/avif"> <!-- Предзагрузка видео --> <link rel="preload" href="hero-video.mp4" as="video" type="video/mp4">
17 / 20

Уважение к пользователям

prefers-reduced-motion

/* Базовая анимация */ .element { animation: slideIn 0.5s ease-out; } /* Если пользователь отключил анимации */ @media (prefers-reduced-motion: reduce) { .element { animation: none; transition: opacity 0.2s ease; } }
Некоторые пользователи страдают от вестибулярных расстройств. Уважайте их выбор!
18 / 20

Чек-лист: CSS-анимации

  • Анимируются только transform и opacity
  • Длительность hover-эффектов: 0.2-0.3s
  • Используется prefers-reduced-motion
  • Нет «миганий» и «дёрганий» при наведении
19 / 20

Чек-лист: Видео

  • Используется AV1/VP9 с фоллбэком на H.264
  • Указаны width, height, poster
  • Для фонового видео: muted, loop, playsinline
  • На мобильных видео не загружается
  • Для длинных видео используется HLS/DASH
20 / 20

Итоги

  • CSS-анимации — для простых переходов (transform, opacity)
  • Lottie — для векторных анимаций (иконки, лоадеры)
  • Rive — для интерактивных анимаций (маскоты, игры)
  • Видео — AV1/VP9 с фоллбэком, оптимизация для мобильных
  • Производительность — lazy-loading, preload, Core Web Vitals
  • Доступность — prefers-reduced-motion
СР №7: Создание интерактивной анимации и оптимизация мультимедиа
Срок: до начала 8-й пары (Проектирование взаимодействий)
← → или Пробел · Home / End