Как сделать прозрачную бегущую строку в Figma
Чтобы сделать прозрачную бегущую строку, нам понадобятся фотографии или изображения, которые будут сменять друг друга на заднем фоне нашей анимации.
Шаг 1
- Создаём текстовое поле (горячая клавиша T) и пишем фразу будущей бегущей строки из 4-х слов. Первое и последнее слово должно повторяться.
- Между словами нажимаем пробел (Space) 4 раза.
Шаг 2
- Добавляем 3 фотографии. Для добавления фотографий можно воспользоваться плагином Unsplash.
- Дублируем одну из фотографий, которая должна быть первой. Располагаем фотографии друг под другом «стопочкой», первая и последняя фотографии должны быть одинаковыми.
- Сдвигаем верхнее фото влево, рядом с остальными.
Шаг 3
- Группируем все наши фотографии (Ctrl+G).
- Располагаем группу с фотографиями над текстом, выделяем группу и текст, и используем маску (Ctrl+Alt+M).
- Выделяем группу с маской и оборачиваем её во фрейм (Ctrl+Alt+G).
- Поставьте галочку Clip content в меню справа.
Шаг 4
- Подгоняем размеры нашего фрейма под размеры первой фотографии, должно остаться одно слово строки и одна фотография, всё остальное должно быть за пределами фрейма.
- В меню Fill добавляем цвет нашему фрейму.
Шаг 5
- Выбираем наш фрейм и создаём из него компонент (Ctrl+Alt+K).
- Создаём вариант нашего компонента при помощи кнопки в верхнем меню компонентов (Add Variant).
- В варианте сдвигаем фотографию влево за пределы фрейма. Достаём следующую фотографию из нашей «стопочки» справа.
- Также сдвигаем строку текста на следующее слово. И меняем цвет у всего фрейма.
Шаг 6
- Дублируем наш вариант (Ctrl+D).
- Сдвигаем фотографию влево, достаём следующую фотографию и двигаем строку текста на следующее слово.
- Меняем цвет фрейма.
Шаг 7
- Связываем фреймы в следующем порядке: 1–2–3–4.
Настройки анимации:
- After Delay — 1 ms;
- Smart animate;
- Linear — 3000ms.
Шаг 8
- Связываем фреймы в следующем порядке: 4–1.
Настройки анимации:
- After Delay — 1 ms;
- Instant.
Готово!
Теперь ты умеешь создавать анимацию прозрачной бегущей строки в Figma. Данная анимация отлично подойдёт для главных экранов сайтов, а также для блоков, где нужно сделать акцент на текст.
Рекомендуем ознакомиться:
Как сделать анимацию списка в Figma
Для создания анимации списка при ховере, мы будем использовать Auto layout. В этом уроке мы поэтапно рассмотрим работу с ним.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
