Автоматическое скрытие закрепленной навигации с помощью Framer Motion за 10 минут
Автор: Frontend FYI – by Jeroen
Загружено: 2024-06-06
Просмотров: 12306
В сегодняшнем видео мы создадим автоматически скрывающуюся и раскрывающуюся липкую навигацию с помощью Framer Motion. Она будет появляться и скрываться в зависимости от направления прокрутки, будет иметь эффект наведения курсора, чтобы снова появиться, если навести курсор на свёрнутую панель, а также обеспечит её доступность.
🤓 Проверьте код здесь: https://www.frontend.fyi/recipes/fram...
ДАЛЬШЕ?
📈 Если вам нужно больше подобного контента, станьте 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
КТО Я?
Если вы новичок на этом канале — привет, меня зовут Йерун. Фронтенд-инженер с почти 15-летним опытом работы, который в 2023 году решил прекратить преподавание только в своих близких колледжах, чтобы начать обучать весь мир. То, чему я учу, некоторые называют инженерным проектированием, я предпочитаю называть это искусством фронтенда.
ТАЙМ-КОДЫ:
00:00 – Вступление
00:35 – Что мы будем создавать
01:05 – Начало
02:30 – Начало кодирования, добавление видимого/скрытого состояния
03:15 – Добавление вариантов движения
03:40 – Включение/выключение анимации в зависимости от состояния
05:20 – Использование useScroll для включения/выключения анимации при прокрутке
07:10 – Повторное появление навигации при прокрутке вверх
11:00 – Отображение навигации при наведении курсора (в свёрнутом виде)
11:50 – Доступность: отображение навигации при фокусировке
12:28 – Заключение
#framermotion #webdevelopment #frontend
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: