Микроанимации на сайте: как оживить страницу и не отпугнуть клиента
Анимация на сайте не украшение ради украшения. Она управляет вниманием: подсказывает, куда смотреть, и делает появление блоков плавным, а не резким. Но та же анимация может раздражать и тормозить страницу, если её слишком много.
Зачем нужны микроанимации
Взгляд человека цепляется за движение. Когда блоки появляются по очереди, клиент успевает заметить каждый и не проскакивает важное. Анимация также даёт обратную связь: кнопка нажалась, форма отправилась, меню открылось.
Готовые эффекты
В каталоге newUX есть готовые эффекты, которые не нужно программировать:
- появление (fadeIn) и исчезновение (fadeOut);
- слайды: вверх, вниз, влево, вправо;
- увеличение и уменьшение;
- отскок;
- пульсация;
- переворот.
Для каждого элемента задаётся CSS-селектор и тип эффекта. Эффекты работают на Web Animations API, поэтому остаются плавными и на длинных страницах.
Тайминги и задержки
Скорость решает, воспринимается анимация как помощь или как помеха. Ориентиры:
- длительность появления: 300-600 мс;
- задержка между соседними элементами: 60-120 мс;
- плавность: ease-out для появления, ease-in-out для циклических эффектов.
Короткая задержка создаёт ощущение последовательности. Если поставить её слишком большой, клиент успеет прокрутить страницу раньше, чем блок появится.
Чего избегать
- Бесконечных циклов на каждом блоке. Пульсация уместна у индикатора статуса, а не у карточки товара.
- Движения, которое мешает читать: подпрыгивающий текст, мигающие элементы.
- Анимации при каждом наведении курсора на всё подряд.
- Появления контента, который уже должен быть виден: если блок появляется слишком поздно, это выглядит как баг.
Влияние на скорость
Анимация не должна быть причиной медленной загрузки. Правила простые: анимируйте только прозрачность и трансформацию, не трогайте свойства вроде ширины и отступов, не запускайте тяжёлые скрипты ради эффекта. Если у клиента включён режим уменьшенного движения, анимацию лучше отключить.
Как подключить
Анимации включаются в панели управления сайтом: выберите элемент по селектору и задайте эффект и параметры. Подробнее в инструкции "Как подключить скрипт newUX". О том, почему скорость вообще важна, читайте в статье про Core Web Vitals.
Итог
Микроанимации помогают, когда они сдержанные и осмысленные: направляют внимание и дают обратную связь. Начните с одного-двух эффектов на самых заметных блоках и следите за скоростью. Общий список улучшений есть в гиде по сайту малого бизнеса.