Анимация параллакс эффекта в 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. Эта анимация подойдёт для первого экрана вашего сайта, она выглядит эффектно и заинтересует пользователя в дальнейшем изучении страницы.