Автоматическое скрытие закрепленной навигации с помощью Framer Motion за 10 минут

В сегодняшнем видео мы создадим автоматически скрывающуюся и раскрывающуюся липкую навигацию с помощью 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