Animate nav on scroll - CSS-only & easy to customize

Рет қаралды 47,546

Күн бұрын

Looking to step up your CSS Game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ First version: codepen.io/kevinpowell/pen/Ba...
✅ Second version: codepen.io/kevinpowell/pen/md...
✅ More on scroll-timeline: • Incredible scroll-base...
✅ CSS-only text-reveal effect: • Can I copy this text r...
✅ The Polyfill: github.com/flackr/scroll-time...
✅ Browser Support: caniuse.com/mdn-css_propertie...
⌚ Timestamps
00:00 - Introduction
00:43 - merch
01:08 - The HTML and starting CSS
02:10 - Adding position: sticky
02:49 - Creating a simple animation
04:50 - Making the animation work on scroll
05:25 - Controlling when the animations starts and ends
08:35 - Making the distance more intuitive
11:55 - Adding more custom properties
13:42 - Dealing with browser support
16:18 - The glashmorphism version setup
17:20 - Making the nav slide in once we scroll down
19:20 - Adjusting the width of the nav when it reappears
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 85

@gReed16384 2 ай бұрын

Well, after a year of watching your videos I learned that its not "Friend and Friends" but "Frontend Friends" ... :D

@danielcrompton7818 2 ай бұрын

Every day is a learning day!

@melekRebai 2 ай бұрын

I thought the same until a couple of videos ago where someone mentioned this

@goodshiro10 2 ай бұрын

So people are starting to realise...

@goranspasic4977 2 ай бұрын

WOW LOL... thank you for clarification xD I thought same

@martinmarru Ай бұрын

Wait what? I thought the same for almost 2years :D

@ricksanchez-c-137 2 ай бұрын

Bro we livin in simulation😂 I tought about this yesterday for my project and now you upload it. Few days earlier same thing happens i think of something my brother Kevin uploads it

@02jaysenghani 2 ай бұрын

@FXY_ 2 ай бұрын

happened to me as well 😂

@Foo678 2 ай бұрын

With animation-timeline we can also make an scroll to top button, that feature is amazing

@vac1e 2 ай бұрын

I'm curious, how you do that? It was like 6 months now, since I haveanything css related work to do and I didn't have time to keep up with this feature.

@clevermissfox 2 ай бұрын

So excited to be able to use scroll driven animations in production(sans polyfill with the bugs ive heard of). Same with viewTransitions. Love that KPow is covering these.

@thecoolnewsguy 2 ай бұрын

"Show off your love for CSS" Bold of you to assume I love CSS

@saintinel 2 ай бұрын

Great Video! ...and those subtle effects are indeed very cool, thanks! ^^

@BobbyCharlz 2 ай бұрын

Locally-scoped variables, brilliant! Thank you for helping to introduce me to this and so many other great concepts in this tutorial. Your videos are fantastic and really do help me build a greater appreciation and curiosity toward CSS; there is a ton of greatness that you can pull off with it and HTML alone.

@LorenzoGasperoni Ай бұрын

I love your work. It helps me a lot and inject me a lot of passion on my work. Thanks ❤

@bopuc 2 ай бұрын

Kevin, awesome. Thank you so much for this, and thanks to the CSS Working Group and the browser peeps and all involved. I needed this 5 years ago, 10 years ago, 20 yers ago… but now I am dating myself. 😅 I want to make a "meta comment" about the video production, if I may. I have a neurological condition that is currently getting more and more popular (go on, guess…) and one of the wonderful challenges it creates for people like us is very very very limited "working memory" (tied to difficulties with attention…). One of the ways this manifests when working with code is that if I don't see *all* the code involved in something I am trying to do in front of me, I get lost. The moment it drops off screen, it ceases to exist in my mind and I cannot "reference it" while think-doing the thing I am doing. (That's why my own working setup is a huuuuge monitor, or two: I need to see all the code I am working on at all times.) What that means for this video (and many many other coding-related ones, not just yours), is that anytime you scroll through your code example (or open other files), I lose context and cannot properly follow along. Thankfully you share your code so I can always just go grab it and open it all up, but I just wanted to mention this in case you might be able to figure out some other way to do these kinds of live demo videos. (For starters, maybe the code doesn't need to be so zoomed in… I guess your audience is all on tiny screens?) Not to mention scrolling up and down the code while demoing a scrolling animation and between the two I think I may have almost fallen out of my seat from the vertigo haha kidding ;) Thanks again!

@02jaysenghani 2 ай бұрын

Thank you Kevin❤

@Aguinaldowagas 2 ай бұрын

You are my savior!!

@ZacHarris_mezoweb 2 ай бұрын

I never comment… you rock Kevin! thanks ❤

@octavian3033 2 ай бұрын

Awesome work. My first time learning about @supports

@user-ko1cw6mv4q 2 ай бұрын

Great video❤

@sol_in.victus 2 ай бұрын

I have been watching you for a couple of months now and i always thought you were saying friend and friend 💀 really took me seeing that t-shirt to realize it's front end friend hahah

@dannievinther 2 ай бұрын

To make it less magic number'y you can use timeline-scope. That way you can, for instance, track the position of the hero component and base the timing of the header animation on that

@pendaco 2 ай бұрын

Would it also be possible to do this the other way around? Have a normal menu scroll out of the viewport but if you scroll UP the sticky menu appears. Basically what a lot of mobile browsers are doing these days. The address bar disappears when scrolling down but as soon as you scroll up the address bar appears again. Of course you can always do it with Javascript but a native CSS solution would be so much cleaner imo!

@mistersimeeec 2 ай бұрын

Would be worth trying bottom: 100%, rather than top: -5rem. Then you can animate in with a transform: translateY(100%). I think... I've not tested this yet, but that's what came to mind. Anyway, very cool to see this doable without js now 👌.

@ofmouseandman1316 2 ай бұрын

I have actually zero use for that.... but i'll stay because 2016 me wanted something like that!

@avgvstvs96 2 ай бұрын

Would you consider making a video on layout shifts? I’m coming across layout shift in some of my component, particularly navbars. i was wondering what can be done to mitigate these issues?

@jonny555333 2 ай бұрын

I found the polyfill to reduce page speed significantly for what it does. Went from a 96 on page speed insights and dropped to 80 from just the polyfill.

@mohdali-yq8gq 2 ай бұрын

This is your new subscriber and really astonished to see your designing skill set but in the same proportion surprised that why are you not using tailwind instead of css so humble request you to switch to tailwind and provide the tutorials using tailwind as you can make the difference!!

@shontam 2 ай бұрын

Hi Kevin, so weird I was thinking of this exact header and you made a tutorial on it, very weird! I would love to learn how to make a menu (and hero section) that is transparent over an image that covers the viewport (at every resolution) and then changes colour (to white for example) on hover. Under each menu item is a line to signal active link and also hover. Also it collapses to a full width hamburger menu for mobile. Have you done a tutorial for something like this? Would love to learn and I have seen this trend a lot recently. I see this transparent menu all over design inspiration sites like Dribble but no tutorials on how to do it. Thanks!

@ico0z 2 ай бұрын

We can color SVGs with mask-image: url(svg)

@RandomGeometryDashStuff 2 ай бұрын

19:20 why use rem unit for blur amount (blur more if user chooses bigger font size in browser settings)?

@dawnz4980 2 ай бұрын

could someone tell me the benefit of doing this over using javascript? very cool and informative video none the less!

@jacksparrow4628 2 ай бұрын

Sir could you please put your best work in one video? Just a summary of what I should put in my highly animated and visually appealing portfolio? For instance you have a lot of css tutorials on amazing animations. Or auto dark or night mode etc. So all I want is a video which describes all your best work and where or when to use it so people can use it in real time.

@Killyspudful 2 ай бұрын

That would be a 25 hour video :)

@mocassine1 28 күн бұрын

Can you make a video for CTA button to NAV BAR on scroll

@ianski9898 2 ай бұрын

Will it slow it down the website or styles loading? Sorry, As i dont know how can i make my css load faster

@10sylv10 Ай бұрын

Is there no way to use view() to trigger an animation with a duration? The scrolling effect is cool but it would be ideal to have the control over how the animation plays once it enters the viewport.

@jfftck 2 ай бұрын

It is possible to use an SVG image and change the fill color, but it requires loading the SVG into an SVG element on the page using the use element. I’m doing that on my own page and it works as expected, but it is more complicated and I would recommend following a tutorial on how to do it.

2 ай бұрын

Is this what you mean? .logo { display: var(--_logoDisplay, block); fill: currentColor; height: 3rem; color: green; }

@jfftck 2 ай бұрын

@ No, this is an HTML snippet for loading external SVG images and have them inline: It does have some limitations, but I don’t like having my HTML cluttered with SVGs. Google “inlining an external SVG” as that will give you a lot more information on how to do it and the limitations.

@LokiDaFerret 2 ай бұрын

Noice! However if you are going to be assigning properties to other properties like you've done with LogoAfterAnimation you really should put the name of the property you are manipulating so a better name might be LogoDisplayAfterAnimation

@kill_switch_101 2 ай бұрын

u r great, u r the new Mozilla MDN Web Docs for me

@thedacian123 2 ай бұрын

Intersection observer js api?

@parenteseswebdev 2 ай бұрын

What about accesability issues?

@r4de_adv 2 ай бұрын

Why are the colors from media query for the dark theme ignored?

@ahooton 21 күн бұрын

Just tried this in my own project and it works great. However, when using 'position: sticky' my nav stops sticking when I scroll as far as 100vh, but when I switch back to 'position: fixed' it works fine and my nav will continue to stick for long page scrolls. I've checked the documentation but still can't quite wrap my head around what's happening 🤔

@franki8469 2 ай бұрын

All of this animation- features don't work on safari and firefox. I'm beginner webdeveloper and I wonder do anyone use those css animations in real life projects? It's seems awsome but this lack of full compabilty makes it useless for me and I end up using something like framer motion anyway

@cseymour97 2 ай бұрын

Because it's not fully supported yet. You'll need a polyfill

@wootwoots 2 ай бұрын

animation-timeline is not yet working on firefox 😭

@AISHAISHWARYA 2 ай бұрын

Surface annimation kaha se copy karke pest kiya sir

@LupoTosk96 2 ай бұрын

New web developers nowadays will never understand the pain of coding for the web 20, hell even 10 years ago. I love any advancements that reduce the need for JavaScript and don't break the entire site on browser versions that don't support new features. Some of our customers regularly report Safari 12 issues tho because they still consider 10 year old apple devices relevant :(

@thrumilens6328 2 ай бұрын

Dude we only drop support for IE in the last two years. Imagine that 😂

@wah0wah 2 ай бұрын

Why does top:-5rem isn't run at the beginning, only on scroll?

@KevinPowell 2 ай бұрын

It is working, but by being a negative, it sticks 5rem above the top of the viewport, so it's out of view,

@acubley 2 ай бұрын

You... you don't have a dark mode option for the T-Shirt? I genuinely disappointed, Kevin. 👀

@KevinPowell 2 ай бұрын

I worked on a dark version with my designer, but neither one of us particularly liked how it looked on a dark material, sorry! My Grid shirt is on a dark shirt :D

@acubley 2 ай бұрын

Can't have everything, I guess. :-)

@VasilyPavlik 2 ай бұрын

After every video I go to caniuse and check when I can get rid a big part of my code/html/css. So, for now FF and Safari are out of the scope. Sad. But anyway, let's wait for the next year.

@dragon3602010 2 ай бұрын

awesome and can we do it in tailwindcss too ?

@DeepTitanic 2 ай бұрын

This is why I hate Tailwind

@malekabo2837 2 ай бұрын

HELLLO MY FRIEND AND FRIENDS

@danielcrompton7818 2 ай бұрын

It’s Front-end friends

@Black1991Star 2 ай бұрын

animation-timeline suported only Chrome)

@KevinPowell 2 ай бұрын

Yup, and it's also past 70% global support now as well... which tells you something about the browser market 😅... but I also did address a few different ways you can approach browser support in the video too :)

@madhurchaturvedi5551 2 ай бұрын

Sir please teach us how to make drop down in tailwind responsive

@erickdavid4257 2 ай бұрын

no tailwind on this channel-just CSS

@KevinPowell 2 ай бұрын

I don't cover tailwind here, but if you watch my responsive nav video where I do it with regular CSS, it should point you in the right direction

@user-cb6lo1rb8t 2 ай бұрын

learn using regular css. Kevin is not going to cover tailwind anyway

@terfy 2 ай бұрын

CSS 2.1 with XHTML 1.1 strict = good times.. today HTML5 and CSS3+ = suck.

@Aleksandra-fw1uz 2 ай бұрын

why don't you work in sass?

@RossPfeiffer 2 ай бұрын

i can't wait for ai to replace all this

@danielcrompton7818 2 ай бұрын

Me too! It pretty much was with me.

@whatamiwitnessing1003 2 ай бұрын

Not useable till all major browsers support it, which will take a while.

@erickdavid4257 2 ай бұрын

you must be fun at parties

@KevinPowell 2 ай бұрын

Why not? It's *perfect* for progressive enhancement.

@LokiDaFerret 2 ай бұрын

This animation is really confusing me because if you've started to start at 150 VH that should be 150% of the viewport height. Yet you are only scrolling a fraction of the way down and it's starting???? So confused 😢

@KevinPowell 2 ай бұрын

100vh would be the top of the viewport. The offset from starting is starting from the bottom. So 0 would be the very bottom of the viewport, because it's watching the scroll of the element into the viewport (as you scroll down), and then out the top. So, by doing 150vh, we're going 50vh higher off the top... hopefully that makes sense 😆

@LokiDaFerret 2 ай бұрын

@@KevinPowell I think I'm measuring backwards. I'm looking at how far you have scrolled down the page. I don't think that's the right place to be looking. It's relative to the UI element and it's position within the viewport yes?