Создание реалистичной анимации складывания с помощью Framer Motion
Автор: Frontend FYI – by Jeroen
Загружено: 2024-06-17
Просмотров: 13536
В этом видео мы воссоздадим дизайн, на который я наткнулся в Твиттере, где Сэм создал этот прекрасный складной компонент карты. Мы воспользуемся Framer Motion, чтобы воссоздать тот же результат с минимальными усилиями!
Обязательно ознакомьтесь с живой площадкой для разработки по ссылке ниже, чтобы получить код и поэкспериментировать с картой самостоятельно!
ССЫЛКИ:
Код и живая площадка для разработки: https://www.frontend.fyi/v/making-a-f...
Твит Сэма: https://x.com/samdape/status/17998436...
ДАЛЬШЕ?
📈 Если вам нужно больше подобного контента, станьте Frontend FYI PRO и получите доступ к моим текущим и всем будущим курсам за единоразовую покупку: https://fe.fyi/pro
📺 Если хотите больше подобных видео, посетите мой сайт: https://fe.fyi/videos
✉️ Подпишитесь на мою рассылку: https://fe.fyi/newsletter
МОИ СОЦИАЛЬНЫЕ СЕТЯ
🌍 Мой сайт – https://www.frontend.fyi
🐦 Twitter – / jeroenreumkens
📸 Instagram – / jeroenreumkens
💼 Linkedin – / jeroenreumkens
СОТРУДНИЧЕСТВО
Хотите вместе работать над созданием контента? Свяжитесь со мной по адресу jeroen [at] frontend.fyi
КТО Я?
Если вы впервые на этом канале — привет, меня зовут Йерун. Я фронтенд-инженер с почти 15-летним опытом работы, который в 2023 году решил перестать преподавать только в своих близких колледжах, чтобы начать обучать весь мир. То, что я преподаю, некоторые называют инженерным проектированием, я предпочитаю называть это ремеслом фронтенда.
ТАЙМ-КОДЫ:
00:00 – Вступление
00:30 – Начальная точка
01:30 – Добавление трёхколоночного макета
02:13 – Добавление изображения карты
03:30 – Перекрытие разделов карты
04:12 – Объяснение подхода к добавлению перетаскивания
05:04 – Добавление перетаскиваемого div
07:30 – Ограничение расстояния перетаскивания
08:25 – Преобразование расстояния перетаскивания в CSS-преобразование карты
10:30 – Предотвращение перемещения области перетаскивания при перетаскивании
11:18 – Масштабирование центральной части карты при развёртывании
12:17 – Добавление тени к центральной части
13:53 – Наклон карты для реалистичности
15:25 – Добавление линий сгиба на карту
15:56 – Добавление теней для ещё большего реализма
17:28 – Автоматическое открытие карты при прекращении перетаскивания
18:34 – Добавление подпрыгивания при открытии карты (с использованием движения (варианты)
20:26 – Добавьте текст, который будет появляться при открытии карты
21:22 – Заключение
#framermotion #webdevelopment #frontend
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: