Scroll lens

Die Idee

Ein kleines monochromes Fenster öffnet sich beim Scrollen zu einer farbigen Landschaft. Du steuerst den Stand der Animation direkt. Scrollst du zurück, schließt sich die Linse wieder.

Scrollen wird zur Zeitachse

CSS Scroll-driven Animations ersetzen eine zeitbasierte Zeitleiste durch den Scrollfortschritt. Diese Demo verwendet eine benannte Zeitleiste auf ihrem eigenen scrollbaren Rahmen. Ein Sticky-Bild bleibt an seinem Platz, während sich sein Ausschnitt und Graustufenfilter verändern.

Beispiel

css

.frame {  height: 400px;  overflow: auto;  scroll-timeline-name: --lens;  scroll-timeline-axis: block;}
.photo {  animation: reveal linear both;  animation-timeline: --lens;}
@keyframes reveal {  from {    clip-path: circle(12% at 50% 50%);    filter: grayscale(1);  }  to {    clip-path: circle(74% at 50% 50%);    filter: grayscale(0);  }}

Die Reihenfolge ist wichtig: animation-timeline muss nach der Kurzschreibweise animation stehen, die den Wert sonst zurücksetzt. Der Rahmen ist von Lenis ausgenommen, damit der Browser seine native Scrollposition verwaltet.

Ausprobieren

Scrolle innerhalb des Fotos, nutze Touch oder fokussiere den Rahmen und drücke die Pfeiltasten. Über die manuelle Steuerung kannst du eine bestimmte Linsenöffnung ohne Scrollen untersuchen.

Unterstützung und Zurückhaltung

Eine Funktionsprüfung aktiviert einen Regler, wenn Scroll-Zeitleisten fehlen. Bei reduzierter Bewegung wird im Scrollmodus das vollständige Foto angezeigt. Die manuelle Steuerung bleibt verfügbar. Diese Studie benötigt keine JavaScript-Scroll-Listener.

Die Animation eines Ausschnitts oder Filters kann trotzdem Renderzeit kosten. Hier bleibt die Arbeit auf ein einzelnes, überschaubar großes Bild begrenzt. Native Syntax macht Rendering nicht kostenlos.

Weiterlesen

CSS scroll-driven animations — MDN