Перейти к основному содержимому

Вопрос-ответ Дизайн и UX

Как сделать анимацию сайта?

Евгений, Москва 678 просм.

Смотрю на сайты конкурентов - у них всё плавно появляется при скролле, кнопки красиво реагируют на наведение. Хочу что-то похожее у себя, но не знаю, это сложная доработка или можно обойтись без программиста.

Елена Захарова UI/UX-дизайнер

ответил

эксперт

Простая анимация сайта - появление блоков при скролле, плавная реакция кнопок на наведение - делается через CSS-переходы и не требует сложного программирования: это несколько часов работы верстальщика. Сложная анимация вроде интерактивных 3D-сцен или покадровой графики - отдельная задача с собственным бюджетом и сроком.

Есть три уровня сложности. Базовый - hover-эффекты на кнопках и ссылках, плавное появление секций при прокрутке. Это стандартная часть верстки почти любого современного сайта, отдельно за неё обычно не доплачивают. Средний - параллакс-эффекты, анимированные счётчики цифр, сложные переходы между состояниями формы: требует чуть больше времени верстальщика, но всё ещё делается на CSS и JavaScript без привлечения аниматора. Продвинутый - кастомная 3D-графика, Lottie-анимации по индивидуальному дизайну, интерактивные сценарии: тут уже нужен отдельный специалист по моушн-дизайну, и стоимость считается отдельно от базовой вёрстки.

Важная оговорка про скорость загрузки. Красивая анимация, которая тормозит сайт на слабом телефоне, вредит больше, чем помогает: в мобильном поиске Google скорость загрузки учитывается как один из факторов ранжирования. Поэтому на практике мы ограничиваем количество тяжёлых эффектов на первом экране и всегда проверяем, что анимация не блокирует отрисовку текста.

Если хотите просто "оживить" готовый сайт без анимации - для сайта на 10-15 страниц базовый набор эффектов обычно занимает 1-3 дня работы. Срок зависит от того, сколько типов блоков нужно анимировать и есть ли уже готовый CSS-каркас, к которому легко цеплять переходы.

Подробный разбор Анимации на сайте: где помогают, а где мешают продажам
Все вопросы темы

Задать свой вопрос

Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.

Похожие вопросы

Все вопросы темы «Дизайн и UX»

Нужен сайт или доработка?

Опишите, что нужно сделать. Вернёмся с расчётом и предложением по структуре.