Scroll-driven

Media Enlarge

…

Beim Scrollen wächst die Media-Fläche und verliert ihre Rundung — der Klassiker à la Apple-Produktseite, hier komplett per CSS.

Weiter scrollen…

.media{
  animation: grow 1ms linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 60%;
}
@keyframes grow{
  from{ transform: scale(.7); border-radius: 24px }
  to  { transform: scale(1);  border-radius: 0    }
}

Hinweis: Ein echter Apple-Frame-Scrub (currentTime an Scroll koppeln) geht nur mit JS. Hier bewusst nur CSS-Skalierung, damit „pure CSS" hält. Für ein echtes Video: <video muted loop playsinline autoplay src="assets/loop.mp4">.