Тёмный

Делаем фиксированное меню при прокрутке с анимацией | HTML & CSS & JS практика 

AVIS TV
Подписаться 10 тыс.
Просмотров 12 тыс.
50% 1

Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
Привет, друзья!
Навигационное меню - это, пожалуй, одно из самых главных составляющих любого сайта. А как сделать так, чтобы оно стало удобнее нашему капризному пользователю? Для этого нам - разработчикам, достаточно сделать его фиксированным, чтобы оно всегда было на виду. А как это улучшить? Мы можем добавить анимашку и появления при фиксировании, скроллинге.
Код меню: codepen.io/rah_emil/pen/yLzemWL (там же изображение)
Тайминги:
0:00 - необходимое вступление
1:44 - настройка проекта
2:49 - верстаем меню
3:57 - верстаем главный экран (для демонстрации меню)
5:04 - стилизуем наш HTML (с помощью SCSS)
15:16 - пишем скрипт, определяющий скроллинг и его величину
19:47 - продолжаем стилизовать
23:43 - демонстрация и завершение
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети

Опубликовано:

 

14 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 24   
@FallenSmile29
@FallenSmile29 2 года назад
Wow wow wow 😍 это слишком круто и как раз самое то что нужно, когда ты только начал верстать в первый раз свой макет. Большое спасибо!
@amarendra439
@amarendra439 Год назад
Замечательное видео. Благодарю за информативный мини курс кодинга. 🙏🙏🙏
@min8132
@min8132 2 месяца назад
Спасибо за урок. Все было интересно, информативно и чудесно.
@MrKING-zw9gj
@MrKING-zw9gj 2 года назад
бро лайк за твой позитив )))
@user-kf5ti4jt3y
@user-kf5ti4jt3y 2 года назад
Красава,буду использовать в своих работах в университете
@DeadStiks
@DeadStiks 2 года назад
Огромное спасибо за видео, урок и код. Всё работает отлично, правда пришлось немного поперебирать кодировки CSS, чтобы привести его в обычный вид. Я сам в JS совсем никак, решил попробовать обратный мягкий эффект докрутить с плавным исчезновением фиксированного меню, но только зря время потратил. Плюнул и решил оставить пока так как есть. Главное - работает. 😆
@romanus8623
@romanus8623 Год назад
Шанс найти такие хорошие гайды - где-то 0,67 процента. Пойду выпью,я везунчик
@Slime-xp1qd
@Slime-xp1qd 2 года назад
Крутое видео
@magistrbrims
@magistrbrims 2 года назад
Спасибо за урок, все круто. Еще бы скрывалось оно медленно:)
@user-vr9sp4xf9e
@user-vr9sp4xf9e 9 месяцев назад
Продолжай обучать)
@yukii-flora
@yukii-flora 2 года назад
это было круто
@kboduck
@kboduck Год назад
Кто-нибудь может объяснить то означает &_scrolled? Пробовал конвертер SCSS to CSS, выдает ошибку.
@user-pc3zs7gn5c
@user-pc3zs7gn5c 2 года назад
блять как 19 лайков за это тут минимум 3 касаря лаков должно быть удачи бротан у тебя отлично получается
@user-wj4pc7te1j
@user-wj4pc7te1j Год назад
А почему при обратном скролле нет плавного убирания?
@rah_emil
@rah_emil 2 года назад
Друзья, честно, я не видел, чтобы кто-то также изящно и самостоятельно сделал анимированное фиксированное меню😂😝
@olzhasmuhamedzhan7807
@olzhasmuhamedzhan7807 Год назад
Напишешь комменту JS чтобы плавно скрывалось?
@igorkopets2285
@igorkopets2285 Год назад
После этих нововведений в searchconsole ошибка на всех страницах из-за смещения макета: Проблема с CLS: значение показателя выше порогового (0,25). В результате чего позции просели и упал трафик. Хотел сделать лучше, а получилось как всегда
@user-lm5ko9pv4m
@user-lm5ko9pv4m 2 года назад
Бро прости за маты но, ебать ты все понятно рассказываешь честно, странно что у тебя мало подписчиков и лайков!
@skrumy6062
@skrumy6062 Год назад
Многие говорят что лучше брать через querySelector, а не getElementById. Типа гетэлемент уже устарел и его уже лучше не юзать
@user-kh4bl8kx3n
@user-kh4bl8kx3n 2 года назад
Если этот человек не гений, то кто?
@ameron26
@ameron26 2 года назад
много не понятно - где ты это делаешь и почему не дефол программа для кода. Как ты пишешь эти &_class(они же не работают в дефолт редакторах). В конце, от куда ты взял этот класс скрола... и тд
@ameron26
@ameron26 2 года назад
@@AVISTV Даже если опустить это, то как общаться к scrolled? У меня получилась фикс меню, но оно фиксированно сразу, а не после определнной прокрутки
@johnvoiter2598
@johnvoiter2598 Год назад
@@ameron26 Часть со скриптом раз 6 посмотрел, все равно не понимаю почему не работает, у меня постояно выбивает Uncaught TypeError: Cannot read properties of null (reading 'classList'),хотя id вроде совпадают,вы не помните как решили проблему?
@Raslambekov
@Raslambekov Год назад
не работает
Далее
🙌🏆🙌 #36Ligas #RealMadrid
00:16
Просмотров 3,2 млн
Loading Page With SVG Animation Using CSS & GSAP
8:22