Как захватить внимание пользователей, добавив сайту динамики: 10 небанальных интерактивных эффектов
Интерактивные элементы на сайте — топливо для эмоций пользователей. Они включают интерес, побуждают к действиям и делают интерфейс привлекательнее. Часто даже небольших микро-анимаций бывает достаточно, чтобы оживить сайт. Покажу на примерах, как создать отзывчивые кнопки, интерактивное меню и эффекты при наведении курсора на картинки — чтобы сайт стал круче и работал эффективнее.
Привет! Я Игорь Литвинцев, мы с командой работаем над no-code платформой Taptop, чтобы дать дизайнерам максимум возможностей для реализации своих идей и создания крутых сайтов. Мы добавили в Taptop целый набор инструментов профессиональной верстки, которые позволяют детально кастомизировать любой элемент страницы. В статье я покажу, как за несколько простых шагов создать на сайте интересные интерактивные эффекты с помощью настроек состояний элементов.
Что такое микро-анимации и зачем они нужны
Микро-анимации — это небольшие эффекты, которые срабатывают на элементах при действиях пользователя. Обычно они показывают, что с элементом можно взаимодействовать — кликать, переходить по ссылке и т.п. Стандартный пример микро-анимаций — это ховер-эффект, т.е. изменение стилей кнопки или пункта меню при наведении курсора мыши.
Интерактивные элементы превращают дизайн-макет из статичной картинки в динамичный и живой сайт:
- привлекают внимание и делают сайт интереснее;
- делают интерфейс понятнее и дают обратную связь;
- вовлекают пользователей в действия.
Чтобы повысить конверсию, особенно важно добавлять интерактивные эффекты элементам, которые служат для целевого действия пользователей — кнопкам заказа, формам подписки и т.п. Оригинальную кнопку сложно пропустить, так что вероятность клика по ней будет больше.
Как создать микро-анимацию с помощью состояний элемента
Самый простой способ создания интерактивных эффектов — настройка внешнего вида элементов в разных состояниях. Поясню, что это такое.
Состояние элемента показывает, как пользователь в данный момент взаимодействует с элементом — например, наводит на него курсор мыши или кликает. Действие пользователя служит триггером для изменения состояния элемента.
При верстке сайта используются четыре основных состояния элемента:
- по умолчанию (default) — стандартное состояние
- при наведении (hover) — при наведении курсора мыши
- активный (active) — при клике
- в фокусе (focused) — при получении фокуса (например, выборе поля формы)
Стили для разных состояний элемента
При создании элемента мы задаем для него определенные настройки стилей — цвет, размер, границы и т.п. Это параметры дизайна для его состояния «по умолчанию».
Для любого другого состояния также можно настроить индивидуальный набор параметров, определяющих его внешний вид. Для каждого состояния вы можете менять один параметр дизайна (например, цвет) или сразу несколько (например, масштаб и расположение).
Интерактивный эффект — это переход элемента из состояния «по умолчанию» в любое другое состояние (в зависимости от действия пользователя), сопровождающийся изменением его стилей. Например, пользователь наводит курсор мыши на кнопку, а она меняет цвет или увеличивается в размере.
От простых микро-анимаций до оригинальных сочетаний эффектов
Многие конструкторы сайтов предлагают ограниченный набор интерактивных эффектов, которые считаются наиболее востребованными. Однако в них вы не сможете реализовать нетипичные решения. Например, можно будет изменить цвет кнопки при наведении, но не получится поменять иконку внутри нее. Для реализации нестандартных идей понадобится писать код.
Платформа Taptop дает больше возможностей, чем стандартные конструкторы сайтов, потому что использует подход, основанный на профессиональной верстке. Настраивая интерактивные эффекты через состояния элементов, вы можете напрямую использовать все возможности CSS-стилей и менять любые параметры для создания оригинальных микро-анимаций.
Плавные переходы между состояниями
При настройке состояний элементов можно не только задать параметры дизайна, но и создать плавный переход между ними. Если этого не сделать, то получится, к примеру, что кнопка при наведении вдруг резко поменяет размер.
Для создания плавных интерактивных эффектов используются настройки перехода (Transition), у которых есть следующие параметры:
- Задержка — время, через которое начнется эффект.
- Длительность — период времени, в течение которого будет происходить смена параметров дизайна.
- Тип смягчения — паттерн изменения скорости воспроизведения анимации на разных этапах.
Если у элемента будет несколько эффектов, можно сделать отдельные настройки перехода для каждого из них или настроить единый паттерн для всех вариантов.
3 шага по настройке состояний элементов
Посмотрим, как делать микто-анимации в Taptop на практике — создадим для кнопки эффект изменения цвета при наведении курсора.
1. Добавляем кнопке состояние «При наведении».
2. Настраиваем дизайн кнопки в состоянии «При наведении» — меняем цвет фона.
3. Настраиваем плавность перехода — устанавливаем длительность 600 ms.
Вот что у нас получилось:
По такому же алгоритму можно настроить и другие состояния элемента. При этом мы можем выбрать любые параметры дизайна, например:
🔹 изменить цвет или изображение фона,
🔹 изменить цвет или размер шрифта,
🔹 изменить цвет или толщину границ,
🔹 изменить размер элемента или отступы,
🔹 добавить эффекты — тень, размытие, яркость, насыщенность, оттенки серого, инверсию,
🔹 трансформировать элемент — масштабировать, сдвинуть по любой оси, повернуть или наклонить.
Посмотрим 10 примеров создания микро-анимаций на различных элементах сайта.
1. Интерактивная кнопка с эффектом сдвига вверх
При наведении курсора кнопка будет сдвигаться вверх, а тень станет более размытой.
Добавляем состояние «При наведении».
Для этого состояния настраиваем трансформацию «Сдвиг», меняя параметр по оси Y.
Меняем параметры тени, увеличивая ее размеры и размытие.
Добавляем плавный переход длительностью 600 ms.
Результат на видео:
2. Кнопка с эффектом увеличения и изменения цвета
При наведении курсора кнопка будет увеличиваться и менять цвет.
- Добавляем состояние «При наведении».
- Меняем цвет фона кнопки.
- Добавляем внешнюю тень с цветом, как у фона кнопки, со всех сторон. Вместо этого можно сделать масштабирование кнопки — результат будет такой же.
- Добавляем переход длительностью 600 ms.
Результат:
3. Интерактивная кнопка с эффектом мерцающего фона
При наведении курсора цвет кнопки будет постепенно меняться.
- Добавляем состояние «При наведении».
- Добавляем внутреннюю тень черного цвета с большим размахом.
- Добавляем переход длительностью 600 ms.
Результат:
4. Кнопка с эффектом поворота и изменения цвета
При наведении курсора кнопка будет поворачиваться под углом и менять цвет.
- Добавляем состояние «При наведении».
- Меняем цвет фона кнопки.
- Настраиваем трансформацию «Поворот» по оси Z.
- Добавляем переход длительностью 300 ms.
Результат:
5. Кнопка с эффектом инверсии цветов
При наведении курсора у кнопки будет инвертироваться цвет фона и текста, а также иконка.
- Добавляем состояние «При наведении».
- Меняем цвет фона кнопки с темного на белый.
- Меняем цвет текста с белого на темный.
- Меняем фоновое изображение иконки на инверсный вариант.
- Добавляем переход длительностью 300 ms.
Результат:
Можно сделать также любые другие эффекты с кнопками — появление рамки, сдвиг в любую сторону, вращение или наклон. Простор для экспериментов огромный.
6. Интерактивное меню с эффектом сдвига пунктов
При наведении курсора пункт меню будет немного сдвигаться вверх.
- Добавляем состояние «При наведении».
- Настраиваем трансформацию «Сдвиг» по оси Y.
- Добавляем переход длительностью 300 ms.
Результат:
7. Интерактивный эффект для полей формы
У полей формы в состоянии фокуса (при клике или переходе по клавише Tab) цвет фона будет меняться на белый и появится граница снизу. Этот эффект послужит визуальной подсказкой пользователю, что поле формы готово для ввода текста.
- Добавляем состояние «В фокусе».
- Меняем цвет фона.
- Добавляем внешнюю тень снизу.
- Добавляем переход длительностью 600 ms.
Результат:
8. Список товаров с эффектом сдвига элементов
При наведении курсора на название товара в списке элемент будет сдвигаться вправо.
- Добавляем состояние «При наведении».
- Настраиваем внутренний отступ слева.
- Добавляем переход длительностью 300 ms.
Результат:
9. Интерактивный эффект с цветовым фильтром
При наведении курсора на картинку ее отображение изменится с серого на цветное.
- Для состояний «По умолчанию» настраиваем фильтр «Оттенки серого» на 100%.
- Добавляем состояние «При наведении».
- Меняем фильтр «Оттенки серого» на 0%.
- Добавляем переход длительностью 300 ms.
Результат:
10. Изображения с эффектом масштабирования и поворота
При наведении курсора картинка будет поворачиваться, увеличиваться в размере и отображаться поверх остальных.
- Для состояний «По умолчанию» настраиваем трансформацию «Поворот» 8 градусов по оси Z — по умолчанию картинка повернута под небольшим углом.
- Добавляем состояние «При наведении».
- Меняем параметры трансформации «Поворот» на 0 градусов по оси Z — при наведении курсора убираем поворот картинки.
- Настраиваем трансформацию «Масштабирование» на 1.1 по осям X и Y.
- Устанавливаем Z-индекс в значение 3 — чтобы картинка отображалась поверх остальных.
- Добавляем переход длительностью 300 ms.
Результат:
Резюме
- Интерактивность делает сайт удобнее и привлекательнее для пользователей.
- Простой способ создания интерактивных эффектов — настройка дизайна элементов в разных состояниях.
- Вы сами выбираете, какие настройки стилей и их комбинации использовать для микро-анимаций. В Taptop можно использовать любые параметры и их сочетания.
Все примеры интерактивных эффектов взяты из бесплатных шаблонов и библиотек компонентов платформы Taptop. Вы можете использовать для своих сайтов эти и другие готовые решения из маркетплейса, а также при желании доработать элементы под свои требования.
Чтобы еще лучше разобраться, как создавать интерактивные эффекты, смотрите видео-урок на Youtube-канале «Анимация кнопки при наведении в Taptop».