Создаём крутой слайдер в Figma и анимируем его
Для создания крутого слайдера нам понадобятся фотографии, которые будут в карточках слайдера. Можно воспользоваться бесплатными фотографиями с Unsplash или Pexeles.
Шаг 1
- Создаём фрейм (F) с цветом 2F2F2F.
- Добавляем текст заголовка.
Шаг 2
- Вне фрейма создаём несколько карточек нашего будущего слайдера.
- Группируем их (Сtrl+ G) и переносим во фрейм.
Шаг 3
- Вне фрейма создаём несколько длинных строк с текстом.
- Сдвигаем их на произвольное расстояние относительно друг друга.
- Выделяем их и переносим во фрейм на задний план.
Шаг 4
- Дублируем фрейм.
- Сдвигаем группу с карточками на следующую карточку.
- Строки текста сдвигаем по отдельности на 100px в разные стороны.
Шаг 5
- Дублируем фрейм.
- Сдвигаем группу с карточками на последнюю карточку.
- Строки текста сдвигаем ещё на 100px.
Шаг 6
Связываем слои 1–2–3–1 со следующими настройками:
- On drag
- Smart animate
- Gentle — 800ms.
Готово!
Теперь ты умеешь делать анимацию крутого слайдера в Figma. Слайдер, при взаимодействии с которым двигается ещё и задний фон, выглядит гораздо эффектнее обычных слайдеров. Данную анимацию можно реализовать, как в мобильнике, так и в десктопе.
Рекомендуем ознакомиться:
Анимация параллакс эффекта в Figma
Для создания эффекта параллакс, нам понадобиться изображение, части которого находяться на разном расстоянии от камеры, чтобы у изображения была глубина и эффект параллакса был более красочным.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
