Kevin Powell - Community•10mo ago

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

MarkBoots•10mo ago

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.

RMONOP•10mo ago

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

RMONOP•10mo ago

It looks like this but when I scroll the more transparent one shows

RMONOP•10mo ago

Here's the code

header {
  background: linear-gradient(to left,  hsla(222, 92%, 5%, 0.5), hsla(0, 0%, 12%, 0.5)); 
  position: sticky;
  top: 0;
}

header {
  background: linear-gradient(to left,  hsla(222, 92%, 5%, 0.5), hsla(0, 0%, 12%, 0.5)); 
  position: sticky;
  top: 0;
}

somrigostsås 🧀•10mo ago

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/abMRGzQ

somrigostsås 🧀•10mo ago

Kevin 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

RMONOP•10mo ago

Thank you for this video, I genuinely was not aware you were able to do things like this without using JS.

Gaming

Programming

Header clipping (transition not smooth)