Гайд по веб‑анимации:
как сделать сайт эффектным
и удобным — виды анимаций
на сайте, способы реализации, принципы использования

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

Посмотрите сайт Apple: при прокрутке лендосов с продуктом, мы обязательно встретим плавное появление текстов, поворот продукта по мере скролла, вставки видео, gif-объектов. Сайт становится интересным: это уже не просто продающий лендинг, который качает только контентом, а визуальный сторителлинг, который за счёт анимации погружает пользователя в продукт и продаёт идею.

Помимо красоты и WOW-эффектов, анимация — это обязательное условие для создания классного, удобного и конкурентоспособного диджитал-продукта.

Что такое анимация

Анимация — это переход состояния объекта из одного в другое за определенный промежуток времени. Например, смена цвета при наведении, скольжение изображения относительно текста при прокрутке, анимация при обработке данных или загрузке страницы, в виде вращающейся шестерёнки или шагающей по экрану макаки с бананами.

Роль и задачи анимации в веб‑дизайне

Подробно мы рассказывали о задачах анимации в статье «Нужна ли сайту анимация». Пробежимся кратко по основным пунктам.

Расстановка акцентов

Одна из задач анимации — расстановка акцентов. Это привлечение внимания пользователя к важным деталям на странице, например:
Выделение объектов с помощью движения
01
project one
project three
project two
Привлечение внимания к кнопке за счёт подёргивания
02
button
Привлечение внимания к тексту за счёт нестандартного появления, смены цвета или размеров.
03
Благодаря акциденции с помощью анимации, пользователя удаётся вести по важным точкам на сайте, чтобы сподвигнуть его к выполнению целевого действия — конверсии

Навигация

Анимация используется для упрощения навигации. Например, всплывающие подсказки: по мере изучения сайта, контента, статьи, в нижнем правом углу высвечивается какая-то подсказка. Если мы посмотрим Youtube, появление подсказок на видео — это та же анимация: когда спикер на видео говорит «Сейчас у вас появится ссылка на нужный ролик» и, действительно, появляется ссылка. Хоть подсказки на Youtube настраиваются автором видео, это тоже анимация в интерфейсе, которая улучшает навигацию и глубину просмотра проекта.
Давайте представим, что вы оборудуете офисы, переговорные, залы и так далее: от мебели до техники. Это сотни товарных позиций. Причём не всегда очевидно: что, куда, для какого помещения, и в каких случаях нужно. Можно отметить «кому надо — тот найдёт и купит», — ок, а как быть с теми, кто ещё не в курсе, что ему это надо =). Можно сделать каталог с удобной фильтрацией, но продать через каталог товар, за которым пользователь не приходил — скорее случайность. Что если сделать виртуальную комнату, наполненную вашей продукцией. Пусть в ней каждый объект будет кликабелен и ведёт на товар или раздел каталога. Пользователь сможет пройти по помещению, посмотреть этот объект почти вживую, разобраться, зачем он нужен и даже представить, куда он у себя в офисе всё это поставит. Звучит круто и не совсем реально?

Цените пример:
На сайтах навигационную роль могут выполнять разные элементы — от меню, до изображений, разбитых на отдельные слои и даже целых виртуальных сцен
Виртуальная презентация товаров Panasonic
Если рассматривать более простые примеры, то, как правило, навигационная анимация касается меню. Например, дроп-дауны, селекты, выпадающие списки, раскрывающиеся фильтры, сложные многоуровневые меню. Представьте многоуровневое меню с кучей разделов, категорий и списком по 20 пунктов в каждой из этих категорий, которое открыто сразу. Легко бы вам было найти нужный пункт в газете на ватмане? Вот это примерно то же самое.

Ориентироваться в таком блоке, если бы он целиком выпал на экран, было бы чудовищно. Но за счёт пошаговости, скрытия определённых объектов в этом меню, мы управляем вниманием пользователя. Не рассеиваем на 100 500 элементов, а фокусируем на определённых нужных ему категориях, и дальше, по мере перехода в нужную категорию, открываются более глубокие подкатегории с помощью анимации.

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

Удобство интерфейса

Представьте, что дизайнер отрисовал форму заявки, а верстальщик сверстал её. Эта форма будет непонятна пользователю, потому что нужно настроить анимацию исчезновения плейсхолдера, анимацию отметки о том, что поле заполнено правильно либо неправильно. Всё это делается через анимацию состояния. В этом сильно помогают дизайн-системы.
Пример: человек отправляет данные на сервер — прикладывает файлы, загружает пост. Как ему узнать, что он всё успешно сделал и сервер принял его пост? Для этого используется эффект загрузки на кнопках: кнопка меняет своё состояние на неактивное, в ней появляется текст «Загрузка данных» или просто «три точечки бегают».
Идея в том, что без анимации, которая говорила бы пользователю: куда он двигается, что делает, на что наводится, чего ожидать, правильно ли ввёл данные, — взаимодействие с интерфейсом стало бы титанически трудным. Только за счёт этих анимаций пользователь вообще понимает, что происходит на сайте. Если анимацию убрать, никто не сможет даже заявку отправить, потому что не поймут, а правильно ли заполнили форму. Или догадаются, что неправильно, но исправить не смогут, потому что текст ошибки не появится без анимации. Всё это делается с помощью функциональной анимации (анимации состояния).

Всё это влияет на восприятие.

Ещё одна задача — эмоции и настроение. Анимация задаёт их за счёт нескольких факторов:

  • что анимировано,
  • как анимировано,
  • с какой скоростью анимировано.

Эмоции и настроение

Работа студентки курса PRO Web, Веры Ганенко
Например, на лонгриде (большая креативно оформленная статья) анимация появления изображений, текста, контента — плавная, равномерная, способствует изучению материалов в определённом темпе, и более приятному и последовательному восприятию большого объема информации.
Анимация сборки продукта. Сделано в Dog Studio
На продающем лендинге — эффект крутости и впечатления о продукте можно создать анимацией сборки этого продукта. Например, пользователь, по мере прокрутки страницы и изучения материала, видит, как посередине экрана постепенно собирается байк. Сначала рассказывается о двигателе — собирается двигатель, начинается рассказ о корпусе — к этому двигателю подетально подтягиваются части корпуса.

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

Виды анимации по назначению

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

Функциональная анимация

Функциональная — анимация взаимодействия пользователя с объектами интерфейса. Например, открытие pop-up окон, получение уведомления об отправке заявки, эффекты наведения на кнопки, раскрывание списков, смена состояния иконок, смена внешнего вида курсора при наведении на объекты или при drag-and-drop.

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

Эстетическая анимация

Отвечает за красоту, марафет, эмоции. Её задача — погрузить пользователя в проект, сделать сайт живее, динамичнее, интереснее.

Типы анимации по охвату

Исходя из масштабности, анимацию делят на частную и глобальную.

Частная анимация на сайте

К частной анимации относятся эффекты, применяемые к конкретным объектам. Такая анимация не используется на всём сайте. Например, анимирование в обложке страницы какой-нибудь вращающейся финтифлюшки.
Обложка сайта kanarys

Глобальная анимация на сайте

Глобальная — это анимация, которая используется на всём сайте. Например, эффекты появления всех текстовых или графических элементов, переходы между страницами или блоками, прелоадеры.
Чтобы выбрать веб-студию — изучите сайт и портфолио. Сам сайт уже презентует компанию и их мышление.
Как выбрать веб‑студию?
Мы рассказываем о себе честно и открыто, почитайте о WebValley Studio
пример

Виды анимации в зависимости от последовательности

Исходя из того, в какой последовательности проигрывается анимация, её делят на следующие группы:

Параллельная анимация

Анимация бывает параллельная, когда несколько объектов одновременно анимируются на экране и одновременно проигрываются. У них могут быть разные движения, но одинаковая скорость, одинаковое время воспроизведения. Всё вместе начинает выглядеть, как один большой анимированный объект.

Анимация с задержкой

Анимация с задержкой предполагает, что сначала на экране появляется один объект, а потом — второй. Это более рациональный способ анимирования, потому что мы не так сильно нагружаем устройство. Анимация проигрывается постепенно, за счёт этой последовательности, мы не подгружаем и не рендерим сразу много объектов.

К тому же, это позволяет управлять вниманием более точно, потому что мы показываем, грубо говоря, по одному объекту.

Групповая анимация

Групповая анимация настраивается не для каждого объекта, а для группы в целом. Самый частый пример использования групповой анимации: при прокрутке сайта на Tilda из стандартных блоков новые секции появляются на экране из прозрачности. Это и есть групповая анимация. То есть весь блок с его содержимым — это группа. И к этой группе применён эффект появления, не к каждому объекту, а ко всему блоку целиком.
# ОТ ОБЩЕГО К ЧАСТНОМУ
# ОТ ОБЩЕГО К ЧАСТНОМУ

Классификация анимации по объектам, к которым она применяется

Виды анимации можно классифицировать по объектам, с которыми происходит взаимодействие.

Анимация интерфейсов

Функциональная анимация интерфейсов касается инпутов, элементов навигации, секций, меню, появления уведомлений, pop-up окон, поведения блоков (например, FAQ — анимация по клику, открытие списков, закрытие)
пример навигации в меню

Анимация текста

Используется для эстетики на сайте, передачи эмоций либо темпа повествования, а также создания акцента. Так контент будет интереснее воспринимать, внимание пользователя не будет рассеиваться на всём сайте, но сохранится на тексте. По мере прокрутки сайта, за счёт последовательного появления информации, глаза пользователя по этим акцентам будут идти ровно также — последовательно. Эффект появления привлекает дополнительное внимание пользователя к тексту, заголовку, повышает дочитываемость.
Чаще это эстетическая анимация: текст каким-то нестандартным образом появляется на экране:

  • побуквенно (эффект печатной машинки),
  • из невидимости,
  • появление снизу вверх или слева направо,
  • с искажением или поворотом.
Сайт Coinflect
Сайт дизайнера интерьеров Ирины Марковской

Анимация фоновых объектов

Например, пользователь кликает на круглую кнопку, круг растягивается на весь экран и появляется белый текст. Это интерактивная анимация фонового объекта, предполагающая взаимодействие с интерфейсом.
Фоновые объекты — декоративные фигуры, плашки, которые появляются по мере прокрутки на сайте, чтобы сделать текст читаемым, либо усилить внимание пользователя на каком-то объекте. Анимация проигрывается по мере скролла, либо с помощью кнопок типа «Нажми на меня».
Жми пример
Например, пользователь кликает на круглую кнопку, круг растягивается на весь экран и появляется белый текст. Это интерактивная анимация фонового объекта, предполагающая взаимодействие с интерфейсом.
Фоновые объекты — декоративные фигуры, плашки, которые появляются по мере прокрутки на сайте, чтобы сделать текст читаемым, либо усилить внимание пользователя на каком-то объекте. Анимация проигрывается по мере скролла, либо с помощью кнопок типа «Нажми на меня».

Анимация фоновых объектов

Иногда фоновые объекты анимируются и без взаимодействия с интерфейсом, просто по мере скролла.

Анимация фона

К анимации бэкграундов и фоновых паттернов относятся: шум, глитч эффекты, параллакс эффекты, различные искажения.
Чаще всего для анимации фона используется простая анимация движения объектов по фону, возможно зацикленная анимация, либо видео.
Если же речь идёт о сложных технологиях, используют JavaScript анимацию, WebGL, Three.js — как правило, это уже про трехмерные сцены.