Тренды веб-анимации. Часть 1

Веб-анимация — это бодро, весело, почти всегда удобно (или архинеудобно, всякое бывает) и вот прямо сейчас очень модно.

Постарались разобраться, какие движущиеся картинки моднее прочих. Изучили статьи про тренды 2020-2021 годов, перерыли awwwards.com, посмотрели проекты, которыми хвастаются дизайнеры и программисты.

Рассказываем и показываем, что нашли.

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

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

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

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

Хочется все-таки пример поновее, в который можно ткнуть пальцем и сказать — о, история пробежала.

Отличный образец: статьи на Kayma Stories.

По мере прокрутки статьи (например, вот этой) в правом поле возникают и меняются элементы анимации, складываясь в короткую, но вполне внятную историю.

Примеры с кодом для тех, кто хочет сделать что-то похожее:

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

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

1.Анимация с процентами не только развлекает ожидающего загрузки пользователя, но и сообщает ему, что ждать осталось недолго. Это касается и прогресс-баров, но насколько мы увидели, прямо сейчас веб-дизайнеры предпочитают полосочкам цифры.

2. Загрузочные картинки не обещают пользователю ничего конкретного, зато неплохо справляются с задачей развлечь и удержать.

3. И все-таки прогресс-бары. Старая добрая полоса загрузки.

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

Немного кода для тех, кто хочет сделать сам: https://codepen.io/Manoz/pen/pydxK, https://codepen.io/aurer/pen/jEGbA, https://codepen.io/psyonline/pen/yayYWg, https://codepen.io/dissimulate/pen/vlfyA, https://codepen.io/tashfene/pen/raEqrJ, https://codepen.io/jackrugile/pen/bjuCf

Эффекты курсора были безумно популярны еще в прошлом веке – и уже тогда безнадежно устарели. Ну что ж, кто сказал, что в моду нельзя войти дважды?

В списках трендов 2021 года курсорные эффекты не замечены, но едва ли не каждый второй сайт на https://www.awwwards.com/ привязывает какую-нибудь анимацию к движению курсора. Например:

Некоторые примеры бессмысленны, беспощадны и противоречат здравому смыслу:

Что мы думаем обо всем этом. Звонили из девяностых, просили вернуть тренд.

Примеры с кодом для тех, кто подумал «Хорошо бы такое сделать» (или «Да я это еще на Бейсике писал_а»):

Динамические буквы, проще говоря. Для тех, кому просто буквы – это скучно.

Что мы думаем обо всем этом. Интересная типографика в движении помогает удержать внимание пользователя на тексте, но мешает его прочесть. Уместна для коротких предсказуемых текстов. Если кинетическая типографика — способ похвастаться, что автор умеет в AfterEffect и заодно выразить ненависть к буквам, то лучше не надо.

Примеры с кодом. А сделать это можно, например, вот так:

https://codepen.io/Valgo/pen/PowZaNY, https://codepen.io/amit_sheen/pen/mdmJNYz, https://codepen.io/OscarTBeamish/pen/vqdrEw

Пользователь смотрит туда, куда навел курсор. Или наоборот. Делать интересно именно там – идея довольно очевидная и вполне разумная. Поэтому ховер-эффекты никогда не выйдут из моды.

Что мы думаем обо всем этом. Делаем что-нибудь по наведению мышки. А без мышей — не делаем. Одобряем. Ненавязчиво и спокойно.

Сделай сам. Эффекты наведения — один из простейших для реализации видов анимации. Кажется, любой конструктор сайтов позволяет добавлять ховер-эффекты. Но можно и своими руками, если хочется. Несколько примеров простых эффектов наведения: https://codepen.io/nxworld/pen/zynobz, https://codepen.io/hexagoncircle/pen/XWbWKwL, https://codepen.io/brownsurfing/pen/LYypPPQ, https://codepen.io/Jhonierpc/pen/MWgBJpy

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

Вот так примерно: https://soviet-design.com/, https://typographyprinciples.obys.agency/, https://www.fern.team/.

Больше картинок не покажем из соображений гуманности. Но их тьмы.

Что мы думаем обо всем этом. Без комментариев.

***

Хотите поспорить или показать другие примеры? Ждем в комментариях.

Не прощаемся. Во второй части поговорим о стилях и стилистических приемах web-анимации.