В хорошей подборке сайтов с анимацией важны не ссылки, которыми можно полюбоваться, а повторяемые приёмы анимации. Первый экран реагирует на курсор, товар поворачивается при прокрутке, заголовок появляется строка за строкой, раздел остаётся на месте, пока разворачивается история. Разобравшись в этих приёмах, вы сможете за несколько секунд оценить любой сайт, который нашли в поисках идей.
Вот 15 приёмов, сгруппированных по месту на странице. Для каждого объясняем, когда он помогает и когда мешает.
Анимация первого экрана
1. Первый экран с реакцией на курсор. Фон, текст или объект наклоняется в сторону указателя. Когда полезно: за две секунды делает первый экран живым. В чём риск: на сенсорных устройствах нет курсора. Нужна альтернатива: гироскоп, лёгкое самостоятельное движение или статичный кадр.
2. 3D-объект на первом экране. 3D-модель товара или скульптуры, которая отображается в реальном времени и которую можно вращать. Когда полезно: для брендов, чьи товары выбирают за форму и материалы. В чём риск: загрузка 3D может задержать первое отображение страницы. Сначала покажите статичное изображение, затем запустите 3D.
3. Вступительная анимация или экран загрузки. Короткая анимация в стиле бренда перед появлением сайта. Когда полезно: только если заполняет реальное ожидание загрузки тяжёлых материалов. В чём риск: почти во всех остальных случаях она просто мешает. Мы бы отказались от неё.
Анимация при прокрутке
4. Показ товара с управлением при прокрутке. Последовательность кадров или видео связаны с положением страницы: вы прокручиваете, а товар собирается, открывается или вращается. Когда полезно: чтобы объяснить принцип работы без видеоплеера. В чём риск: длинная последовательность изображений быстро увеличивает объём загрузки. Заранее ограничьте число и объём кадров.
5. История в закреплённом разделе. Один блок остаётся неподвижным, пока рядом меняются текст или изображения. Когда полезно: для пошагового рассказа, демонстрации функций и хронологии. Подробнее - в статье «Примеры сайтов с повествованием при прокрутке». В чём риск: если блок закреплён слишком долго, пользователь чувствует, что застрял.
6. Слои с параллаксом. Передний и задний планы движутся с разной скоростью. Когда полезно: чтобы добавить глубину плоской фотографии. В чём риск: в руководстве WCAG Animation from Interactions параллакс назван частой причиной симптомов у людей с вестибулярными нарушениями. Отключайте его, если пользователь выбрал уменьшение движения.
7. Раздел с горизонтальной прокруткой. При вертикальной прокрутке содержимое движется вбок. Когда полезно: для галерей и линеек товаров. В чём риск: без видимого указателя прогресса пользователю трудно ориентироваться.
8. Изображения, появляющиеся через clip-path и маски. Изображение открывается через заданную форму вместо плавного проявления. Когда полезно: в редакционных проектах, моде и архитектуре. В чём риск: если так появляется каждая картинка, приём перестаёт выделяться.
Анимация текста
9. Поэтапное появление текста. Заголовок появляется по строкам, словам или буквам. Когда полезно: чтобы задать ритм ключевому сообщению. В чём риск: если заголовок вначале скрыт и появляется лишь после выполнения JavaScript, это может задержать Largest Contentful Paint. Chrome не рассматривает элементы с opacity 0 как кандидатов на LCP, пока они не появятся.
10. Подвижная типографика и бегущие строки. Крупный текст прокручивается, растягивается или движется циклично. Когда полезно: для ярких брендов, запусков и сайтов мероприятий. В чём риск: WCAG 2.2.2 требует возможности приостановить, остановить или скрыть автоматически движущийся контент, если он показывается рядом с другим содержимым дольше пяти секунд.
11. Счётчики чисел. Числовые показатели увеличиваются до нужного значения, когда попадают на экран. Когда полезно: для одного-двух ключевых чисел. В чём риск: сетка из двенадцати счётчиков создаёт визуальный шум.
Навигация и реакции на наведение
12. Переходы между страницами. Старая страница плавно растворяется или превращается в новую без белой вспышки. Когда полезно: чтобы многостраничный сайт воспринимался цельно. Встроенный в браузер View Transition API теперь работает и с переходами между отдельными страницами, а не только в одностраничных приложениях. При этом поддержка API зависит от браузера. В чём риск: переходы дольше половины секунды создают ощущение медленной навигации.
13. Превью при наведении. Наводите курсор на название проекта, и рядом появляется изображение или видео, которое следует за указателем. Когда полезно: для портфолио, списков проектов и коллекций. В чём риск: на сенсорных устройствах эффект недоступен. Список должен оставаться удобным и без него.
14. Магнитные кнопки и отклик интерфейса. Кнопка действия тянется к курсору, а кнопка добавления в корзину подтверждает нажатие лёгким подпрыгиванием. Когда полезно: чтобы показать, что нажатие сработало. В чём риск: эффект не должен задерживать само действие.
15. Плавная прокрутка. Библиотеки вроде Lenis сглаживают движение страницы при прокрутке колёсиком. Когда полезно: чтобы синхронизировать сложную анимацию, связанную с прокруткой. В чём риск: такое решение может мешать обычной прокрутке на телефонах или ломать якорные ссылки.
Краткое сравнение: приём и риск
| Приём | Для каких задач | Главный риск | Уровень затрат |
|---|---|---|---|
| Первый экран с реакцией на курсор | Первое впечатление о бренде | На смартфоне нет курсора | Средний |
| 3D-объект на первом экране | Товарные бренды | Задержка первого отображения | Высокий |
| Показ товара с управлением при прокрутке | Объяснение механизма работы | Большой объём файлов | От среднего до высокого |
| История в закреплённом разделе | Демонстрация функций | Ощущение, что вы застряли на странице | Средний |
| Поэтапное появление текста | Заголовки | Задержка LCP | Низкий |
| Переходы между страницами | Цельность многостраничного сайта | Медленная навигация | Средний |
| Превью при наведении | Портфолио, коллекции | Не видны на сенсорных устройствах | Низкий |
Как правильно заимствовать приём
Скопировать эффект несложно. Ощущение качества создаёт точная настройка времени и темпа движения.
Nielsen Norman Group рекомендует для большинства анимаций интерфейса диапазон 100-500 мс: около 100 мс для простого подтверждения действия и 200-300 мс для более заметных изменений. Для элементов, которые останавливаются, рекомендуется ease-out. Исключение - анимация при прокрутке: её темп задаёт пользователь.
Когда мы заимствуем идеи из понравившегося дизайна сайтов с анимацией, следуем трём правилам:
- Один главный приём на страницу. Выразительный первый экран сочетайте со спокойными разделами.
- Одна группа кривых движения на всём сайте. Разнородные кривые создают впечатление, что сайт собран из несвязанных частей.
- У каждого приёма должна быть версия для режима уменьшения движения. Не полное отключение, а более спокойная анимация.
Если нужны приёмы, с которыми посетитель может взаимодействовать, а не просто смотреть, прочитайте статью «Интерактивный дизайн сайта».
