Scroll-driven

Sticky Navbar Shrink

…

In den ersten 120px Scroll-Distanz schrumpft die Bar und bekommt Blur. Kein JS, kein Scroll-Listener.

formrausch · Nerdtalk

Scroll runter — die Sticky-Bar oben schrumpft in den ersten 120 Pixeln, verliert Padding und bekommt einen Blur-Hintergrund. Alles über animation-timeline: scroll(nearest block).

header{
  animation: shrink 1ms linear both;
  animation-timeline: scroll(nearest block);
  animation-range: 0 120px;
}
@keyframes shrink{
  to{ padding-block:.4rem; backdrop-filter:blur(10px); font-size:.9em }
}

Merksatz: animation-range nimmt Pixel oder Prozent — für „die ersten 120px" ist genau das der Weg.