Движущийся фон на первом экране стал обычным приемом: облако частиц за заголовком, зацикленный ролик производства, плавный перелив градиента. Прием рабочий, но у него высокая цена ошибки — фон живет на самом видном месте страницы и первым влияет на скорость загрузки. Разбираем, чем делать такую анимацию, как подготовить видео, что происходит с читаемостью текста поверх и какие проверки мы проводим перед публикацией.
Когда движение на фоне оправдано
Мы исходим из простого правила: фон должен что-то сообщать. Если ролик показывает продукт, процесс или место, он несет информацию и заменяет абзац текста. Если это абстрактные частицы «для красоты», он добавляет вес и отвлекает от заголовка и кнопки.
Ситуации, где движение обычно оправдано:
- производство, стройка, ресторан, отель — то, что убедительнее показать, чем описать;
- продукт, который сложно объяснить статичной картинкой: интерфейс в работе, оборудование в цикле;
- задача выделиться в нише с одинаковыми шаблонными сайтами, при условии что скорость не пострадает.
Ситуации, где мы обычно отговариваем:
- страницы, куда приходят с рекламы за конкретным действием: там на первом экране важнее оффер, цена и форма;
- каталоги и карточки товара, где фон конкурирует с фотографиями;
- проекты, где основной трафик мобильный и приходит с медленных сетей.
Чем делать: четыре способа и их цена
Под «анимированным фоном» скрываются разные технологии с разной нагрузкой. Выбор делается до отрисовки макета, потому что от него зависит, что дизайнер вообще может нарисовать.
| Способ | Типичный вес | Нагрузка на устройство | Когда берем |
|---|---|---|---|
| CSS: градиенты, keyframes, transform | Единицы килобайт внутри общего файла стилей | Минимальная, анимация transform и opacity идет на видеокарте | Плавные переливы, медленное движение форм, подсветка под блоками |
| SVG с анимацией через CSS | Десятки килобайт | Низкая, если элементов немного | Векторные узоры, линии, схемы, повторяющийся паттерн |
| Canvas или WebGL: частицы, шейдеры | Библиотека от 100 КБ и выше | Высокая: постоянные вычисления и разряд батареи | Только когда эффект нельзя получить иначе и есть запас по скорости |
| Зацикленное видео, MP4 и WebM | От одного до нескольких мегабайт при аккуратной подготовке | Средняя, декодирование аппаратное | Реальные съемки: производство, объект, продукт в работе |
| Lottie или анимированный WebP | Сотни килобайт | Средняя, зависит от сложности сцены | Иллюстративная анимация, нарисованная дизайнером в After Effects |
Практический вывод из таблицы: если эффект можно собрать на CSS, мы собираем его на CSS. Библиотека частиц весом с полторы сотни килобайт ради размытых точек за заголовком — плохая сделка.
Видеофон: подготовка файла
Видео на фоне отличается от видео в плеере: его никто не смотрит целиком, звука в нем нет, и оно должно стартовать сразу. Отсюда набор требований к исходнику.
- Длительность 8-15 секунд. Более длинный ролик все равно не досмотрят, а вес вырастет пропорционально.
- Бесшовная петля. Первый и последний кадр должны совпадать, иначе на стыке виден рывок. Проще всего это дается статичной камерой.
- Два формата. MP4 (H.264) как основной и WebM (VP9) как более легкий вариант для браузеров, которые его поддерживают. Подключаются двумя тегами source внутри video.
- Разрешение по месту показа. Для полноэкранного фона обычно достаточно 1920 px по ширине, отдавать 4K смысла нет: фон все равно перекрыт затемнением и текстом.
- Без звуковой дорожки. Ее удаление экономит вес и снимает вопрос автозапуска: браузеры разрешают автовоспроизведение только беззвучному видео.
- Постер-кадр. Атрибут poster с легкой картинкой показывает первый кадр, пока видео грузится, и остается запасным вариантом там, где автозапуск заблокирован.
Обязательный набор атрибутов у тега video: autoplay, muted, loop, playsinline и preload в значении metadata. Без playsinline мобильный Safari открывает ролик на весь экран в собственном плеере, и вместо фона посетитель получает видео поверх сайта. Без muted автозапуск не сработает вовсе.
Отдельное решение — что показывать на телефоне. Чаще всего мы не грузим видео на узких экранах совсем: отдаем постер-кадр как обычное изображение. Мобильный трафик и заряд батареи дороже, чем эффект, который на пятидюймовом экране почти не читается.
Текст поверх движения
Главная претензия к видеофонам не в скорости, а в том, что заголовок на них не читается. Кадр меняется, и то, что было контрастным на первой секунде, теряется на пятой.
- Кладем между видео и текстом слой затемнения: сплошной полупрозрачный цвет или градиент от плотного к прозрачному со стороны текста.
- Проверяем контраст по худшему кадру, а не по первому. Ориентир — соотношение 4.5:1 для основного текста и 3:1 для крупных заголовков, как требует WCAG.
- Выбираем ролик со спокойной композицией: если в кадре быстро двигается контрастный объект, текст поверх него будет мерцать.
- Легкое размытие фонового видео снимает конкуренцию за внимание, но свойство filter: blur добавляет нагрузку на отрисовку, поэтому лучше размыть исходник заранее в монтаже.
- Кнопку призыва к действию делаем на сплошной заливке, а не контурной: контурная кнопка на движущемся фоне теряется.
Производительность
Анимация фона легко съедает бюджет загрузки первого экрана. Чтобы этого не происходило, придерживаемся нескольких правил.
- Анимируем только transform и opacity. Анимация ширины, высоты, отступов или координат top и left заставляет браузер пересчитывать раскладку на каждом кадре.
- Видео не должно блокировать отрисовку: preload в значении metadata вместо auto, постер в формате webp.
- Свойство will-change ставим точечно и только там, где эффект действительно тяжелый: на каждом элементе подряд оно само становится проблемой, так как резервирует память.
- Останавливаем анимацию, когда она вне экрана: IntersectionObserver вместе с методами pause и play у видео экономит ресурсы на длинных страницах.
- Проверяем частоту кадров в панели Performance на слабом устройстве, а не на рабочем ноутбуке разработчика.
- Смотрим на метрику LCP: если самым крупным элементом первого экрана оказался постер видео, его вес напрямую влияет на оценку скорости.
Доступность и настройки пользователя
В операционных системах есть настройка «уменьшить движение», и браузер сообщает о ней через медиавыражение prefers-reduced-motion. Для части людей длительная анимация вызывает физический дискомфорт, поэтому мы всегда пишем ветку, в которой движение отключается: видео заменяется постером, CSS-анимация останавливается.
Второе правило — фон не должен быть единственным носителем смысла. Если в ролике показан адрес, режим работы или ключевое преимущество, то же самое должно быть текстом на странице: поисковая система видео не читает, а посетитель с медленным интернетом его не дождется.
Третье — управляемость. Если ролик длинный и заметный, уместна небольшая кнопка паузы. Для восьмисекундной петли она нужна редко, но для видео с сюжетом обязательна.
Чек-лист перед публикацией
- Страница открывается на телефоне по мобильной сети и показывает содержимое первого экрана до того, как загрузился фон.
- Видео запускается без действий пользователя в Chrome и Safari, не разворачивается на весь экран, не издает звуков.
- Петля не дает видимого рывка на стыке.
- Заголовок и кнопка читаются на всех кадрах, в том числе на самом светлом.
- При включенной настройке «уменьшить движение» анимация останавливается.
- Оценка скорости мобильной версии не просела относительно варианта со статичной картинкой сильнее, чем вы готовы принять.
- Если фон не загрузился, страница выглядит законченной: постер или сплошной цвет, а не пустая черная область.
Если нужна помощь
Мы подбираем формат фона под задачу страницы, а не наоборот: сначала смотрим, что должно происходить на первом экране, потом решаем, нужна ли там анимация и какой ценой. Обсудить проектирование веб-интерфейсов и разобрать первый экран вашего сайта можно на первичной консультации.
