Анимация параллакс эффекта в Figma
Для создания эффекта параллакс, нам понадобиться изображение, части которого находяться на разном расстоянии от камеры, чтобы у изображения была глубина и эффект параллакса был более красочным.
Шаг 1
- Создаём фрейм.
- Добавляем изображение на задний фон.
- Добавляем изображение, которое будет двигаться поверх нашего фона.
Шаг 2
- Добавляем элементы дизайна, текст и кнопку.
- Создаём прямоугольник с цветом изображения, которое будет перекрывать фон.
- Растягиваем прямоугольник по размерам нашего фрейма и сдвигаем его вниз, за пределы фрейма.
- Поставьте галочку Clip content.
Шаг 3
- Дублируем наш фрейм.
- Выносим хедер за пределы фрейма вверх.
- Текст и кнопку сдвигаем вверх и непрозрачность ставим 0%.
Шаг 4
- Увеличиваем изображение на фоне.
- Увеличиваем изображение, которое лежит поверх фона.
Шаг 5
- Возвращаемся к первому фрейму и дублируем его.
- Выбираем изображение, которое лежит поверх фона, и прямоугольник, который находится за пределами фрейма.
- Сдвигаем их вверх, пока прямоугольник полностью не закроет фрейм.
Шаг 6
Добавляем текст на третий фрейм.
Шаг 7
Связываем фреймы 1–2:
- After delay — 800ms
- Smart animate
- Ease out — 1500ms.
Шаг 8
Связываем фреймы 2–3 от кнопки к фрейму:
- On click
- Smart animate
- Ease out — 1500ms.
Готово!
Теперь ты умеешь создавать параллакс анимацию в Figma. Эта анимация подойдёт для первого экрана вашего сайта, она выглядит эффектно и заинтересует пользователя в дальнейшем изучении страницы.
Рекомендуем ознакомиться:
Как сделать анимацию картинки в картинке
Для создания интересной анимации картинки в картинке, нам понадобится изображение, которое мы будем анимировать.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
