Веб-анимация — это бодро, весело, почти всегда удобно (или архинеудобно, всякое бывает) и вот прямо сейчас очень модно.
Постарались разобраться, какие движущиеся картинки моднее прочих. Изучили статьи про тренды 2020-2021 годов, перерыли awwwards.com, посмотрели проекты, которыми хвастаются дизайнеры и программисты.
Рассказываем и показываем, что нашли.
0. Зачем это все?
Удобство. Иногда анимация — отличный инструмент, помогающий понять, какие кнопки жать, куда идти, на что смотреть.
Красота. Анимация может быть чисто декоративной. Просто способ привлечь и удержать внимание пользователя.
История. И, наконец, иногда анимация рассказывает историю, создавая эмоциональную связь между интерфейсом и пользователем.
1. Сторителлинг
С этим трендом как-то сложно: про него много говорят, но в качестве примера таскают из статьи в статью одну и ту же картинку, причем не очень-то и новую. Хотя действительно хорошую:
Хочется все-таки пример поновее, в который можно ткнуть пальцем и сказать — о, история пробежала.
Отличный образец: статьи на Kayma Stories.
По мере прокрутки статьи (например, вот этой) в правом поле возникают и меняются элементы анимации, складываясь в короткую, но вполне внятную историю.
Примеры с кодом для тех, кто хочет сделать что-то похожее:
2. Анимация загрузки
Пока страница грузится, пользователь может переключиться на другой сайт, а вернувшись, забыть, зачем вообще приходил.
Быстрый интернет породил нетерпеливых пользователей, и анимация загрузки, удерживающая их внимание, снова в тренде.
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
3. Эффекты курсора
Эффекты курсора были безумно популярны еще в прошлом веке – и уже тогда безнадежно устарели. Ну что ж, кто сказал, что в моду нельзя войти дважды?
В списках трендов 2021 года курсорные эффекты не замечены, но едва ли не каждый второй сайт на https://www.awwwards.com/ привязывает какую-нибудь анимацию к движению курсора. Например:
Некоторые примеры бессмысленны, беспощадны и противоречат здравому смыслу:
Что мы думаем обо всем этом. Звонили из девяностых, просили вернуть тренд.
Примеры с кодом для тех, кто подумал «Хорошо бы такое сделать» (или «Да я это еще на Бейсике писал_а»):
4. Кинетическая типографика
Динамические буквы, проще говоря. Для тех, кому просто буквы – это скучно.
Что мы думаем обо всем этом. Интересная типографика в движении помогает удержать внимание пользователя на тексте, но мешает его прочесть. Уместна для коротких предсказуемых текстов. Если кинетическая типографика — способ похвастаться, что автор умеет в AfterEffect и заодно выразить ненависть к буквам, то лучше не надо.
Примеры с кодом. А сделать это можно, например, вот так:
https://codepen.io/Valgo/pen/PowZaNY, https://codepen.io/amit_sheen/pen/mdmJNYz, https://codepen.io/OscarTBeamish/pen/vqdrEw
5. Ховер-эффекты
Пользователь смотрит туда, куда навел курсор. Или наоборот. Делать интересно именно там – идея довольно очевидная и вполне разумная. Поэтому ховер-эффекты никогда не выйдут из моды.
Что мы думаем обо всем этом. Делаем что-нибудь по наведению мышки. А без мышей — не делаем. Одобряем. Ненавязчиво и спокойно.
Сделай сам. Эффекты наведения — один из простейших для реализации видов анимации. Кажется, любой конструктор сайтов позволяет добавлять ховер-эффекты. Но можно и своими руками, если хочется. Несколько примеров простых эффектов наведения: https://codepen.io/nxworld/pen/zynobz, https://codepen.io/hexagoncircle/pen/XWbWKwL, https://codepen.io/brownsurfing/pen/LYypPPQ, https://codepen.io/Jhonierpc/pen/MWgBJpy
7. Скролл в безумных направлениях
Кажется, стало очень модно перематывать экран не туда, куда ожидает пользователь. Влево, вправо, вверх, по диагонали, со сменой направления.
Вот так примерно: https://soviet-design.com/, https://typographyprinciples.obys.agency/, https://www.fern.team/.
Больше картинок не покажем из соображений гуманности. Но их тьмы.
Что мы думаем обо всем этом. Без комментариев.
***
Хотите поспорить или показать другие примеры? Ждем в комментариях.
Не прощаемся. Во второй части поговорим о стилях и стилистических приемах web-анимации.
На сенсорном экране большинство этих решений не работают, нет там курсора или "наведения". Интересно было бы аналогичную статью глянуть, где есть разбор таких трендов под мобильный интернет.
там все просто, убирается ховер и курсор, зато остается загрузка, скролл, да и хороший стротеллинг не лишним будет
А на не-сенсорном - это умудряется тормозить так, что хочется сразу в adblock забросить. Оно прикольно один-два раза, а если это есть на регулярно используемом сайте - бесит и отвлекает.
Круто, а зачем это все пользователю?
Это называется "вау эффект"
Всё равно что ты получишь в магазине сразу айфон без коробки и лишишься кайфа от распаковки
У меня гигабитный интернет, и достаточно мощный комп, чтобы сожрать киберпанк на максималках в 4к. И когда я вижу, что сайт открывается не сразу, а вылезает какой-то загрузчик, который крутится пыхтит и показывает как оно все грузится - я немного удивляюсь. Наверное какой-то баран прикрутил анимацию, чтобы я ее просто посмотрел. Второй раз я на этот сайт, конечно же, не зайду. Это как если бы айфон приходилось каждый раз распаковывать, чтобы включить.
Тут уже как сам сайт сделан, какими ручками
повальное увлечение сложными анимациями, которые грузят твой девайс, чаще всего только раздражает. Я прихожу на сайт за контентом, который мне интересен, а не за "свистоперделками". Должна быть гармония между формой и содержанием.
Комментарий недоступен
Анимация с процентами напрягает, т.к. если проценты видишь, значит, сайт будет три часа грузиться
Все хорошее - хорошо забытое старое. Открываем галерею шаблонов сайтов на флеше и вдохновляемся.
Всё новое
А параллакс и статичный фон при нестатичных блоках с заливкой?
Эта анимация превращается в ад для владельцев старых ПК, или медленного интернета
Есть хоть кто-то, кого не бесят кастомные курсоры, которые всегда отстают от нативного?
Есть. И избыточные анимашки тоже.
Было время для для Flash - анимации в Web, таких чумовых фантазий можно было увидеть и сделать. Я в то время активно этим занималась на фрилансе, а совсем недавно видела , что делают для web - страниц ребята на OpenGL и JS, - круто!
К счастью flash можно быть выключить (если не весь сайт на нём, видел и такие "шедевры"), а вот webgl и js останутся с тобой и будут всё тормозить.
ClickToFlash и подобные плагины появились не зря.