Как стать автором
Обновить

Разбор: зачем нужны анимации на сайтах + 7 полезных инструментов и библиотек для их создания

Время на прочтение 3 мин
Количество просмотров 9.1K
Всего голосов 11: ↑6 и ↓5 +1
Комментарии 20

Комментарии 20

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

И ещё бы галочку «не использовать анимацию, фоновые видео и прочие ненужности», чтобы не грузить ненужные штуки пока грузятся нужные. Обещаю не уходить с сайта недождавшись загрузки основной информации.
Есть анимации, в которых действительно цель разработчика — улучшить взаимодействие с пользователем, наглядно продемонстрировать определенный контент, сделать законченными и ненавязчивыми изменения состояния приложения — вообще очень часто такая анимация неотделима от приложения. Ничего не имею против.
А бывает и так, где цель анимации — вау эффект, т.е. анимация ради анимации.
Здесь в еженедельных дайджестах по фронтенду регулярно вижу что то вроде «топ N сайтов с эффектами» — как правило, это «портфолио» веб-дизайнеров или целых фирм. Ощущение такое, что это соревнование кто кого переплюнет эффектами, за которыми найти что то другое, кроме этих эффектов зачастую тот еще квест, где как в сказке, чем дальше, тем страшнее.
НЛО прилетело и опубликовало эту надпись здесь
Одна из них – заполнение времени, которое пользователю нужно ждать загрузки страницы.
Вариант сделать загрузку страницы быстрой не рассматривается?

Также анимации могут быть использованы для приветствий и создания нужного настроения – для этого, например, подходят фоновые видео.
Особенно когда пользователь заходит на сайт с древнего ноутбука или телефона, с 5% зарядки и медленным интернет соединением.
Ну если мы рассматриваем вариант сделать загрузку страниц быстрой, то может рассмотреть и вариант не показывать видео для старых ноутов/медленного соединения? Не очень понимаю, в чем вообще проблема.
НЛО прилетело и опубликовало эту надпись здесь
Ну это идеологический вопрос — сделать так, чтобы не было богатых, или чтобы не было бедных. В вашей постановке, раз у части пользователей условия похуже, то остальных надо притянуть к ним, а не дать им что-то более хотя бы даже просто круче выглядящее, если при этом не ухудшаются условия ни для кого. Я лично не очень с этим согласен идеологически, в т.ч. как сооснователь SaaS-стартапа, где описанная вами ситуация как раз бывает часто.
НЛО прилетело и опубликовало эту надпись здесь
Слушайте, ну весь дизайн, все искусство тогда — тоже нагревание воздуха. Так можно дойти до того, что кто не лечит рак — тот бесполезный трутень и делает то, что не нужно.

Например, вы полностью забываете про людей с дислексией — им лишние для кого-то визуальные элементы оказываются крайне полезны во многих случаях. Опять же знаю из общения со своими пользователями.
Помня про инвалидов (что похвально) вы забываете про простых людей, которых большинство и большинству из них ваши дуделки вообще не уперлись, а только бесят.
которых большинство и большинству из них ваши дуделки вообще не уперлись

Есть пруфы какие-то по этому поводу или мастерство экстраполяции?
А у вас есть пруфы, что эти свистоперделки многим нужны?
вы полностью забываете про людей с дислексией — им лишние для кого-то визуальные элементы оказываются крайне полезны во многих случаях.
А вы забываете про людей с нарушениями вестибулярного аппарата. Для них анимации размеров и позиций могут иметь негативный эффект.

Обратите внимание на красное предупреждение в верхней части страницы.
developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Меня хабр не перестает радовать – здесь есть какие-то общепринятые представления о прекрасном, которые никак не соотносятся с реальностью (типа анимации зло, рекрутеры все бездельники, маркетинг — ерунда), и народ готов подогнать весь мир под это.

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

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

Ниже – пример анимации из мобильного веба, что, прям если делать так, как слева – это действительно хуже?

image
НЛО прилетело и опубликовало эту надпись здесь
Ну опять все кругом рукожопы и не понимают, как надо делать на самом деле. Это типичная реакция на Хабре в последнее время, меня как человека, делающего свои проекты, это прям расстраивает. Вопрос в том, что здесь анимация решает конкретную проблему.

Понятно, что лучше быть здоровым и богатым, но если уж есть какие-то проблемы, стоит и решения поискать.
НЛО прилетело и опубликовало эту надпись здесь
но если да, то рассуждения об одноногих инвалидах, которых тошнит от анимации выглядят немного странно

вы полностью забываете про людей с дислексией

Вы ведь сами эту тему подняли.
Да, анимации очень сильно повышают вовлечение и читаемость. Если кто-то подскажет сервисы для оптимизации анимации и видео, чтобы меньше весили для сайтов, буду очень благодарен!
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории