Сайты с анимацией продают, когда движение подсказывает человеку, куда смотреть и что нажать, и мешают, когда страница грузится дольше, чем клиент готов ждать. Если вы видели анимированные сайты у конкурентов и хотите такой же, начните с вопроса, какое действие посетителя должна усилить анимация. Ниже разберу виды движения, риски для скорости и телефона, цены и сроки.
Какие бывают сайты с анимацией
Под словом «анимация» заказчики имеют в виду очень разные вещи. Одному нужен лёгкий отклик кнопок, другому 3D-модель товара, которая крутится за курсором. От выбора зависят бюджет, срок и скорость загрузки, поэтому сначала договоримся о названиях.
| Вид анимации | Как выглядит | Где уместен | Риск |
|---|---|---|---|
| Появление блоков при прокрутке | Карточки и заголовки плавно выезжают, когда до них долистали | Почти любой сайт услуг | Слишком медленное появление раздражает |
| Параллакс | Фон движется медленнее текста, создаётся глубина | Первый экран, портфолио, туризм | Укачивает часть людей, тяжело на слабых телефонах |
| Микроанимации | Кнопка мягко меняется при наведении, галочка анимируется после отправки формы | Формы, корзина, запись | Риск минимальный |
| Видео-фон | На первом экране без звука идёт ролик: интерьер, процесс, команда | Рестораны, салоны, недвижимость | Тяжёлый файл замедляет загрузку |
| 3D | Модель товара или объёмная сцена, которую можно покрутить | Мебель, техника, архитектура | Дорого, нагружает процессор |
Красивые сайты с анимацией обычно сочетают два-три вида, а не все пять сразу. Кофейне хватит видео-фона с баристой и появления меню при прокрутке. Мебельной мастерской с дорогим столом имеет смысл 3D-модель, которую клиент покрутит и рассмотрит со всех сторон.
Когда анимация на сайте приносит заявки
Движение работает на заявку в трёх ситуациях. Первая: оно показывает то, что трудно объяснить картинкой. Салон показывает «до и после» шторкой, которую тянут пальцем, и клиент сам видит результат. Вторая: оно подтверждает действие. Человек отправил форму, галочка нарисовалась, и ему понятно, что запись прошла. Третья: оно направляет взгляд. Кнопка «Записаться» слегка оживает, когда посетитель долистал до цен.
Сайты с анимацией хорошо заходят там, где покупают эмоцию: рестораны, ивенты, свадебные студии, дизайн интерьера. Сайту с анимацией для юриста или бухгалтера чаще хватает микроанимаций и аккуратного появления блоков. Клиент юриста ищет ясность и доверие, ему важнее прочитать, сколько стоит консультация.
Интерактивный сайт имеет смысл, когда посетитель что-то настраивает сам: калькулятор ремонта, подбор тура, конфигуратор кухни. Здесь движение помогает понять, как меняется цена от выбора.
Когда анимированные сайты теряют клиентов
Главная проблема анимации: скорость. Google оценивает удобство страниц по метрикам Core Web Vitals. По данным web.dev, главный элемент страницы должен загрузиться за 2,5 секунды, отклик на нажатие укладываться в 200 миллисекунд, а сдвиг вёрстки держаться не выше 0,1. Тяжёлый видео-фон и 3D-сцена бьют как раз по этим показателям. Поэтому сайты с анимацией я собираю так, чтобы первый экран показывался сразу, а движение подключалось чуть позже.
Вторая проблема: телефоны. Многие клиенты кофейни или салона открывают сайт с мобильного, где слабее процессор и медленнее интернет. Сайты с анимацией надо проверять на обычном недорогом смартфоне: на мощном ноутбуке дизайнера всё летает. На телефоне я обычно заменяю видео-фон статичной картинкой, а параллакс отключаю.
Третья проблема: доступность. Международное руководство WCAG прямо называет параллакс примером необязательного движения, от которого у людей с вестибулярными нарушениями кружится голова и бывает тошнота. В телефонах и компьютерах есть настройка «Уменьшить движение», и браузер сообщает о ней сайту. Нормальные сайты с анимацией её учитывают: блоки просто появляются без полёта. Ещё одно правило WCAG: если что-то движется само дольше пяти секунд, у посетителя должна быть возможность это остановить.
Проверьте и автозапуск видео. Браузер Chrome разрешает ролику стартовать сам только без звука, поэтому видео-фон со звуком у большинства посетителей просто не заиграет.
Как описать примеры сайтов с анимацией без ссылок
Запрос «сайты с анимацией примеры» в поиске обычно задают, чтобы показать разработчику, чего хочется. Ссылки на чужие сайты помогают слабо: вы смотрите на цвет, я на шрифт, и мы понимаем разное. Надёжнее описать словами по шагам.
- Назовите действие посетителя. «Хочу, чтобы человек записался на стрижку за две минуты».
- Опишите первый экран. «Без звука идёт короткое видео: мастер делает укладку, поверх крупно оффер и кнопка».
- Перечислите, что движется при прокрутке. «Карточки услуг выезжают снизу по одной, цены появляются вместе с ними».
- Отметьте, что движется от действий. «Кнопка темнеет при наведении, после отправки формы рисуется галочка».
- Запишите, чего не хотите. «Без параллакса, без музыки, без анимации на телефоне дольше секунды».
- Укажите настроение. «Спокойно и дорого» или «быстро и задорно».
Такой бриф на полстраницы экономит пару кругов правок. Сайты с крутой анимацией почти всегда начинаются с подобного описания: дизайнер понимает, где движение нужно, а где хватит статики. Как сформулировать сам оффер для первого экрана, я разбирал в статье про текст для сайта.
Сколько стоит сайт с анимацией и сколько его делать
Цена сайта с анимацией зависит от объёма движения и от того, нужен ли нейросетевой визуал. Вот как это выглядит у меня.
| Пакет | Что входит | Цена | Срок |
|---|---|---|---|
| Базовый | Сайт на отлаженном шаблоне, наполнение, домен, SSL | 20 000 ₽ | 3-7 дней |
| Нешаблонный сайт с анимацией | Свой дизайн, анимация, нейросетевой визуал, 3D-элементы по задаче | 35 000-50 000 ₽ | 3-10 дней |
| Продвинутый | Всё выше плюс форма заявок, чат-бот и аналитика | 70 000-100 000 ₽ | 7-15 дней |
Срок считаю с момента, когда готовы тексты и фото. Если видео для фона ещё не снято, это отдельная задача, и её стоит запланировать заранее. Чем сайт с анимацией отличается от обычного по процессу работы, подробно описано в статье про разработку сайтов для бизнеса, а полный список пакетов есть на странице цен.
Частые вопросы
Сайты с анимацией хуже ранжируются в поиске?
Запретов на анимацию у поисковиков нет. Проблемы начинаются, когда из-за неё страница медленно грузится или текст подгружается так, что поисковый робот его не видит. Лёгкое появление блоков и микроанимации скорости почти не вредят.
Можно ли добавить анимацию на уже готовый сайт?
Да, если сайт сделан на нормальном движке. Микроанимации и появление блоков добавить несложно. Видео-фон и 3D часто требуют переделать первый экран целиком.
Какие красивые сайты с анимацией подойдут небольшой компании?
Для небольшой компании обычно хватает видео или живой картинки на первом экране, плавного появления услуг и отклика кнопок. Тренды оформления на этот год я собрал в статье про тренды веб-дизайна.
Интерактивный сайт и анимированный: в чём разница?
Сайт с анимацией двигается сам или при прокрутке. Интерактивный вариант отвечает на действия: калькулятор, конфигуратор, перетаскивание. Часто это одно и то же, просто с разным акцентом.
Что сделать на этой неделе
Откройте свой сайт на телефоне и отметьте, где посетитель сомневается: на первом экране, в ценах или в форме. Именно там анимация принесёт больше пользы. Потом напишите бриф по шести шагам выше, даже если сайт с анимацией пока только в планах. Сайты с анимацией с готовым брифом делаются быстрее и обходятся без лишних правок.
Если не хочется разбираться самому, сделаю под ключ: подберу движение под вашу нишу, проверю скорость на телефоне и учту настройку «Уменьшить движение». Подробности и примеры пакетов на странице создания сайтов.