Header clipping (transition not smooth)
So, I attempted to code a header that was meant to drop down smooth when a user scrolls down the website and then go back to normal when the user is at the top of the web but I couldn't figure out how to make the transition smooth. The header just clips which makes the website not look as good as it could.
I'll link a code pen below of all the code so you can test it out and see what I'm attempting to explain.
https://codepen.io/hrphyn/pen/RwdeWav
8 Replies
The way you are doing it now, you can just make the header
position:sticky
with top:0
in CSS. no need for JS
So not sure what exactly you want it to do.What I want is for the header to look like it's apart of the main page when the user is all the way at the top of the screen then for it to have a smooth drop down effect with it becoming more transparent when the user scrolls down.
the thing im noticing is that when I try to make it a lighter color (somewhat transparent) a weird effect happens Im not sure what it is
It looks like this but when I scroll the more transparent one shows
Here's the code
The reason why you're getting this jump glitch effect is because you're switching from
position: static
(which all elements have by default) to position: fixed
. When using fixed
or absolute
, other elements don't take that element's space into calculation, and therefore, when you scroll, the site jumps up 110px (the height of the header) when it changes to fixed
. My suggestion is that you keep it fixed all the time. As MarkBoots mentioned, you can also use sticky
, but it all depends on when you want the animation to kick in, since the opacity might bleed through to the body element, which is white.
With some more modern CSS, using animation-timeline
and animation-range
, you can achieve the same effect, without the use of JS. It's supported in Chrome and Edge as for now, and with limited support in Firefox. A forked example I created is available here:
https://codepen.io/erikblomqvist/pen/abMRGzQKevin has done a few videos on the subject, with the most basic here: https://www.youtube.com/watch?v=UmzFk68Bwdk
Demos and more reading can be found here: https://scroll-driven-animations.style/#demos
As a fallback, using
@supports
, you can just use an opacity: 0.5
by default, I think.Kevin Powell
YouTube
Incredible scroll-based animations with CSS-only
Been playing with them a little bit up until now, and it's finally time time for a deep dive into scroll-timeline and the scroll() and view() value functions.
In this one I look at a few different effects, like a scroll watcher, fading in images as they enter the viewport, moving elements horizontally as we scroll down, and a few more things as...
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations
Thank you for this video, I genuinely was not aware you were able to do things like this without using JS.