Анимация на сайте: как называются эффекты, примеры и как не замедлить сайт

Анимация на сайте — это движение элементов страницы: появление блоков при прокрутке, параллакс, отклик кнопки на наведение и нажатие, 3D-сцены и встроенные ролики. Хорошая анимация объясняет продукт и подсказывает, куда нажать. Плохая двигает вёрстку, тормозит недорогой телефон и не выключается. Проверить себя можно тремя вопросами: что этот эффект объясняет, чем он нагружает страницу и что увидит человек, у которого в телефоне включено «уменьшить движение».

Как называется анимация на сайте

Когда пишете ТЗ или ищете примеры, удобно знать названия. Вот основные.

Название	Что это	Где уместно
Параллакс	слои двигаются с разной скоростью при прокрутке или за курсором, и у плоской страницы появляется глубина	первый экран, история о продукте
Скролл-анимация	анимация привязана к прокрутке: сцена меняется, пока вы листаете. В CSS для этого есть scroll-driven animations — анимация идёт по шкале прокрутки, а не по времени	объяснение процесса по шагам
Проявление при прокрутке (reveal)	блоки и строки входят в экран, когда до них доходит взгляд	длинные страницы
Микровзаимодействия	короткий отклик на действие: кнопка нажалась, форма отправилась, товар лёг в корзину	формы, корзина, переключатели
Hover	эффект при наведении курсора. На телефоне курсора нет, поэтому важное нельзя прятать в hover	карточки, ссылки, меню
Лоадер (прелоадер)	индикатор загрузки или заставка, пока грузится страница	только если ожидание неизбежно
Lottie	векторная анимация, которую дизайнер делает в After Effects, а библиотека Lottie проигрывает на сайте из JSON-файла	иконки, иллюстрации
3D и WebGL	объёмная сцена в браузере: CSS-трансформации в 3D или WebGL — API для 3D-графики без плагинов	показ товара, интерактивная сцена
Кинетическая типографика	буквы и слова меняют вес, размер или положение	заголовок, главный тезис

«Интерактивная анимация на сайте» — это всё, что отвечает на действие человека: на курсор, касание, перетаскивание, прокрутку. Ролик, который просто играет, интерактивным не считается.

Примеры: что сделано на наших страницах

Мы не будем показывать чужие сайты. Ниже две наши страницы, где движение сделано кодом, без библиотек анимации. Откройте их рядом со статьёй.

«Разработка сайтов». Первый экран — стопка слоёв-макетов. На компьютере слои сдвигаются за курсором, каждый на свою глубину, а при прокрутке разъезжаются с разной скоростью. Это и есть параллакс. Дальше идёт сцена «сайт на конвейере»: блок высотой в несколько экранов, внутри него приколотая сцена, которая стоит на месте, пока вы листаете. Пять станций — бриф, каркас, дизайн, движение, запуск — сменяют друг друга по мере прокрутки, а полоса прогресса растягивается через transform. На низком экране, например у телефона в горизонтальном положении, вместо приколотой сцены остаётся обычный список. Ниже — пять живых образцов приёмов: параллакс, 3D-наклон карточки за курсором, живая типографика, кнопка, которая тянется к курсору, и проявление строк при прокрутке.

«Моушн-дизайн». На первом экране — 3D-кольцо из шести наших вертикальных роликов, собранное на CSS-перспективе. Кольцо медленно крутится само, докручивается прокруткой страницы, его можно тянуть мышью или пальцем с инерцией. Нажатие на передний ролик открывает его целиком со звуком. Ниже — «монтажный стол»: пять дорожек процесса и головка, которая идёт по таймлайну вместе с прокруткой.

Как это сделано, чтобы не тормозить:

• Ролики грузятся, только когда кольцо в экране. У видео стоит preload="none" и постер. Источник подставляется, только когда кольцо попадает в экран. Петли без звука — 540×960, от 148 до 886 КБ каждая. Полная версия со звуком весит от 1,4 до 4,9 МБ и грузится только по нажатию.
• Играют только передние ролики. Остальные стоят на постере и не тратят ни сеть, ни батарею.
• Кадр считается, только пока сцена в экране. Прокрутка лишь просит браузер пересчитать кадр. Если ничего не происходит, страница не крутит анимацию впустую.
• Курсорные эффекты включаются только там, где есть курсор. Код проверяет (hover: hover) and (pointer: fine), поэтому на телефоне карточки за пальцем не поворачиваются.
• При «уменьшить движение» всё стоит. Кольцо не крутится само, петли не запускаются, бегущая строка останавливается. Содержание при этом то же: постеры и просмотр по нажатию.

Что показал PageSpeed

1 октября 2026 года мы проверили наши страницы в PageSpeed Insights на вкладке «Мобильный». Главная получила 100 из 100 при LCP 1,7 с. Страница «Разработка сайтов» — с приколотой сценой на пять экранов, параллаксом и живыми образцами приёмов — 93 из 100, CLS 0,002, общее время блокировки 40 мс. Вывод простой: много движения и высокая оценка совместимы, если двигать transform и opacity, не сдвигать вёрстку и не запускать то, чего не видно на экране.

Анимация на Тильде

На Тильде анимацию делают в Zero Block. По справке Тильды, там два режима. Базовая анимация — это эффект появления, параллакс и фиксация. Пошаговая запускается одним из пяти условий: элемент появился на экране, блок появился на экране, прокрутка, наведение, клик. Для лендинга с появлением блоков и простым параллаксом этого хватает. Эффекты за пределами этих триггеров, например перетаскивание сцены пальцем с инерцией, придётся писать кодом. Чем отличаются конструктор и сайт на коде, разбираем в статье «Tilda, WordPress или сайт на коде». Правила ниже одинаковы для любого инструмента.

Что помогает продавать, а что мешает

Помогает	Мешает
сцена объясняет, как работает продукт	анимация ради анимации, которая ничего не объясняет
кнопка отвечает на нажатие, форма показывает «отправлено»	лоадер на 3 секунды перед каждой страницей
заголовок и кнопка видны сразу, движение догружается	первый экран пуст, пока не загрузится скрипт
блок проявляется, не сдвигая соседей	элементы прыгают, кнопка уезжает из-под пальца
видео играет без звука, звук — по нажатию	автоплей со звуком и тяжёлый видеофон
бегущую строку и карусель можно остановить	бесконечное движение без паузы

Производительность: что анимировать, а что нет

Главное правило из руководства web.dev — анимировать только transform и opacity. Эти свойства браузер обрабатывает на этапе композиции, без пересчёта вёрстки. Свойства top, left, width, height и margin заставляют пересчитывать вёрстку на каждом кадре. На недорогом телефоне такая анимация дёргается. will-change web.dev советует ставить точечно и только при реальной проблеме: лишние слои сами по себе нагружают страницу.

Анимация влияет и на две метрики Core Web Vitals:

• CLS. Сдвиг через top и left считается сдвигом вёрстки, даже если элемент на отдельном слое. Анимация через translate на CLS не влияет.
• INP. Тяжёлый JavaScript занимает основной поток, и страница позже отвечает на нажатие. Хорошим считается INP до 200 мс.

Как измерить эти метрики и что ещё тормозит сайт, разбираем в статье «Скорость загрузки сайта».

«Уменьшить движение» и доступность

В iPhone, Android, Windows и macOS есть настройка, которая просит интерфейс двигаться меньше. На iPhone она лежит в разделе «Универсальный доступ → Движение», на Android 9 и новее — в специальных возможностях (в английском интерфейсе пункт называется Remove animations). Сайт видит её через медиазапрос prefers-reduced-motion. Включают её не из прихоти: у людей с вестибулярными нарушениями движение на экране может вызывать головокружение, тошноту и мигрень.

Что говорит стандарт доступности WCAG:

• 2.3.3 Animation from Interactions, уровень AAA (появился в WCAG 2.1). Анимацию движения, которая запускается действием пользователя, можно отключить, если она не необходима для работы или смысла. Это высший уровень соответствия, но выполнить его легко: в WCAG медиазапрос prefers-reduced-motion указан как один из способов.
• 2.2.2 Pause, Stop, Hide, уровень A. Если движение начинается само, длится дольше 5 секунд и показывается рядом с другим содержимым, у пользователя должен быть способ его остановить или скрыть. Это про карусели, бегущие строки и видеофоны.

Автоплей видео и вес

Chrome всегда разрешает автоплей без звука. Со звуком — только если человек уже взаимодействовал с сайтом. Поэтому ролик на сайте делают так: без звука, с постером, с атрибутом playsinline (без него iPhone открывает видео на весь экран) и с загрузкой, когда ролик попадает в экран. Звук — по нажатию. Видео легко перевешивает всю страницу. Для сравнения: HTML нашей страницы «Моушн-дизайн» весит около 86 КБ, а одна короткая петля без звука — до 886 КБ. Если видеофон не объясняет продукт, замените его картинкой.

Чек-лист: хорошая анимация на сайте

1. У каждого эффекта есть задача: объяснить, подсказать, подтвердить действие.
2. Заголовок, текст и кнопка видны без анимации и без JavaScript.
3. Двигаются только transform и opacity.
4. У картинок и видео прописаны размеры, ничего не прыгает (CLS до 0,1).
5. При prefers-reduced-motion движение выключено, содержание то же.
6. Бесконечное движение дольше 5 секунд можно остановить.
7. Анимации за экраном стоят на паузе.
8. Видео — без звука, с постером, грузится по мере прокрутки.
9. Эффекты под курсор не прячут важного: на телефоне курсора нет.
10. Страница проверена в PageSpeed на вкладке «Мобильный» до и после анимации.

Что делать дальше

Пройдите чек-лист на своём сайте, начиная с пунктов 2, 3 и 5: они дают больше всего при меньшей работе. Если анимацию нужно сделать с нуля, начните с вопроса, что она должна объяснить, а уже потом выбирайте эффект. Чем моушн-дизайн отличается от просто анимации, разбираем в статье «Моушн-дизайн: что это простыми словами».

Сайты с параллаксом и сценами при прокрутке мы собираем кодом. Посмотреть приёмы вживую можно на странице «Разработка сайтов», ролики и 3D — на странице «Моушн-дизайн». Лендинг с параллаксом и сценой при прокрутке — пакет «Движение», 7,9 млн сум, остальные цены есть в прайс-листе, точная цена — после бесплатного брифа.