Animate nav on scroll - CSS-only & easy to customize
HTML-код
- Опубликовано: 13 июн 2024
- 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 RUclips 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!
Well, after a year of watching your videos I learned that its not "Friend and Friends" but "Frontend Friends" ... :D
Every day is a learning day!
I thought the same until a couple of videos ago where someone mentioned this
So people are starting to realise...
WOW LOL... thank you for clarification xD I thought same
Wait what? I thought the same for almost 2years :D
With animation-timeline we can also make an scroll to top button, that feature is amazing
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.
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
+1
happened to me as well 😂
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.
"Show off your love for CSS"
Bold of you to assume I love CSS
Great Video! ...and those subtle effects are indeed very cool, thanks! ^^
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.
I love your work. It helps me a lot and inject me a lot of passion on my work. Thanks ❤
Awesome work. My first time learning about @supports
Thank you Kevin❤
I never comment… you rock Kevin! thanks ❤
You are my savior!!
Great video❤
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!
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!
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
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
I have actually zero use for that.... but i'll stay because 2016 me wanted something like that!
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!
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?
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 👌.
u r great, u r the new Mozilla MDN Web Docs for me
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.
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!!
We can color SVGs with mask-image: url(svg)
19:20 why use rem unit for blur amount (blur more if user chooses bigger font size in browser settings)?
could someone tell me the benefit of doing this over using javascript? very cool and informative video none the less!
Can you make a video for CTA button to NAV BAR on scroll
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.
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.
That would be a 25 hour video :)
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
Because it's not fully supported yet. You'll need a polyfill
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 🤔
Will it slow it down the website or styles loading? Sorry, As i dont know how can i make my css load faster
Why are the colors from media query for the dark theme ignored?
Surface annimation kaha se copy karke pest kiya sir
What about accesability issues?
Intersection observer js api?
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.
Is this what you mean?
.logo {
display: var(--_logoDisplay, block);
fill: currentColor;
height: 3rem;
color: green;
}
@ 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.
animation-timeline is not yet working on firefox 😭
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
awesome and can we do it in tailwindcss too ?
This is why I hate Tailwind
Why does top:-5rem isn't run at the beginning, only on scroll?
It is working, but by being a negative, it sticks 5rem above the top of the viewport, so it's out of view,
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.
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 :(
Dude we only drop support for IE in the last two years. Imagine that 😂
HELLLO MY FRIEND AND FRIENDS
It’s Front-end friends
Sir please teach us how to make drop down in tailwind responsive
no tailwind on this channel-just CSS
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
learn using regular css. Kevin is not going to cover tailwind anyway
You... you don't have a dark mode option for the T-Shirt? I genuinely disappointed, Kevin. 👀
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
Can't have everything, I guess. :-)
animation-timeline suported only Chrome)
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 :)
CSS 2.1 with XHTML 1.1 strict = good times..
today HTML5 and CSS3+ = suck.
why don't you work in sass?
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 😢
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 😆
@@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?
i can't wait for ai to replace all this
Me too! It pretty much was with me.
Not useable till all major browsers support it, which will take a while.
you must be fun at parties
Why not? It's *perfect* for progressive enhancement.
Having these magic numbers do not work in the real world with tons of different screen resolution and sites being dynamic with cms
Should we use js for performance? And what are your thoughts on gsap scrolltrigger for this
No, it will absolutely perform better without GSAP / JS.
What about switching back to that black bg navbar later down without js? :)