Статья
Анимация на сайте: какая помогает, а какая мешает
Анимация на сайте — любое движение: кнопка, которая откликается на нажатие, блоки, которые появляются при прокрутке, 3D-сцена на первом экране. Хорошая анимация подсказывает, куда смотреть, и делает сайт запоминающимся. Плохая заставляет ждать, тормозит на телефоне и укачивает. Разбираем, какой она бывает и как не перестараться.
Зачем она нужна
- Подсказать, куда смотреть: движение притягивает взгляд сильнее цвета.
- Ответить на действие: кнопка нажалась, форма отправилась, товар в корзине.
- Объяснить: показать, как работает продукт или что будет по шагам.
- Создать настроение: бренд, который двигается по-своему, запоминается.
Если анимация не делает ничего из этого, её можно убрать без потерь.
Какие бывают
| Вид | Что это | Где уместна |
|---|---|---|
| Микроанимации | Отклик кнопок, переключателей, полей формы | На любом сайте |
| Появление при прокрутке | Блоки проявляются или выезжают, когда до них доходят | Лендинги, презентации продукта |
| Переходы | Плавно открываются меню, вкладки, ответы на вопросы | На любом сайте |
| Анимированные иллюстрации | Векторные картинки и иконки, которые двигаются | Объяснить сложное, оживить пустое место |
| Видео | Ролик на фоне или в блоке | Продукт, место, атмосфера |
| 3D и частицы | Объёмная сцена прямо в браузере | Первый экран, витрина продукта |
| Параллакс | Слои двигаются с разной скоростью | Один-два акцентных блока |
О видео — статья «Видео на сайте», о параллаксе — «Параллакс на сайте».
Примеры
- Лендинг нутрициолога Анны Стародумовой. На первом экране — спираль ДНК из частиц: тема понятна раньше, чем прочитан заголовок. Разбор страницы — в статье «Примеры лендингов».
- Baseline — концепт студии для теннисного клуба. Крупная типографика, пружинная анимация и плавная прокрутка: движение поддерживает спортивную тему, а не спорит с ней.
Когда анимация мешает
- Текст «доезжает». Человек хочет читать, а абзац ещё выплывает.
- Двигается всё. Когда анимирован каждый блок, взгляду не за что зацепиться.
- Заставка без причины. Экран загрузки оправдан, если за ним готовится тяжёлая сцена, а не ради эффекта.
- Тормозит на телефоне. Эффект, плавный на мощном компьютере, дёргается на обычном смартфоне.
- Укачивает. У части людей движение на экране вызывает головокружение и тошноту.
Правила аккуратной анимации
- Коротко. Отклик кнопки и раскрытие меню — доли секунды; дольше — уже ожидание.
- Только лёгкие свойства. Плавнее всего двигаются сдвиг, масштаб и прозрачность: эту работу браузер отдаёт видеокарте. Анимация размеров и отступов заставляет пересчитывать страницу — и прокрутка дёргается.
- Содержимое видно и без анимации. Если скрипт не загрузился, текст не должен остаться невидимым.
- Уважать «уменьшение движения». Если в настройках телефона или компьютера оно включено, крупные эффекты отключают и показывают спокойную версию.
- Пауза для долгого движения. По международным правилам доступности WCAG то, что двигается само дольше пяти секунд, — бегущую строку, карусель — посетитель должен иметь возможность остановить.
- Не больше трёх вспышек в секунду. Частое мигание может вызвать приступ у людей с фоточувствительной эпилепсией.
- Проверка на обычном телефоне, а не только на компьютере разработчика.
Анимация и скорость
Анимация весит: библиотеки эффектов, файлы векторной анимации, 3D-модели и видео загружаются вместе со страницей. Тяжёлое подгружают после первого экрана или когда до него дошла прокрутка, а 3D готовят так, чтобы страница не зависала, пока собирается сцена. Как проверить, не стал ли сайт медленнее, — в статье «Скорость загрузки сайта».
Как это делаем мы
На нашем сайте много движения: 3D-сцена на главной, анимации при прокрутке. Если в настройках телефона или компьютера включено уменьшение движения, анимации появления текста и блоков отключаются.
В лендинге анимации и 3D мы используем там, где они работают на задачу, а макет показываем и правим до начала вёрстки. Вёрстку делаем на коде, чтобы страница быстро загружалась на телефоне и медленном интернете.