Делаем интересную hover анимацию в Figma
Для создания интересной ховер анимации нам понадобятся фотографии, которые будут появляться на фоне.
Шаг 1
- Создаём новый фрейм с цветом #F6F6F6
- Добавляем элементы дизайна.
Шаг 2
- Создаём текстовый слой.
- Дублируем и уменьшаем текст.
- Группируем текстовые слои (Сtrl + G).
- Дублируем и заменяем контент.
Шаг 3
- Добавляем фотографии.
- Подгоняем их под ширину фрейма.
- Добавляем каждой заливку чёрного цвета с прозрачностью 25%.
- Группируем фотографии (Ctrl+G) и ставим непрозрачность для каждой из них 0%.
Шаг 4
- Дублируем фрейм.
- Цвет одного из заголовков меняем на #FC7DFF
- Остальные тексты делаем белыми.
- Меняем непрозрачность у одной из фотографий на 100%.
Шаг 5
- Дублируем фрейм.
- Меняем цвет у другого заголовка на #FC7DFF
- Предыдущий текст делаем белым.
- Меняем непрозрачность для следующей фотографии на 100%.
Шаг 6
- Повторяем эти действия для всех заголовков.
- Поставьте непрозрачность белых заголовков во всех фреймах 50%.
Шаг 7
Связываем фреймы (от заголовков ко фрейму):
- While hovering
- Smart animate
- Slow — 600ms.
Готово!
Теперь ты умеешь создавать интересную hover анимацию. Эта анимация отлично подойдёт для первых экранов, а также для страницы или блока с категориями.
Рекомендуем ознакомиться:
Как сделать анимацию navbar в Figma
В этом уроке мы пошагово разберём, как сделать анимацию навигационной панели для мобильного интерфейса в Figma.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
