Modernes Micro‑Motion‑Design: Scroll‑Snap Galerie & „Zoom‑on‑View“ ohne Plugins

In diesem Mini‑Tutorial bauen wir zwei elegante Effekte mit Bordmitteln: 1) eine Scroll‑Snap Galerie – Slidernavigation ganz ohne JS‑Plugin – und 2) „Zoom‑on‑View“ – Bilder zoomen sanft, sobald sie sichtbar sind.

Modern only + Fallback: Wir nutzen moderne Browser‑Features (z. B. scroll-snap-type und :has()). Ältere Browser erhalten eine saubere, aber nicht animierte Darstellung. Der Intersection Observer als Fallback markiert Bilder mit einer Klasse, falls :has() noch nicht verfügbar ist.

Demo 1 – Scroll‑Snap Galerie (Slider‑Feeling ohne Plugin)

Wische/scroll nach links und rechts. Dank scroll-snap-type rasten die Karten sauber ein. Buttons scrollen jeweils um eine Karte.

Sonnenaufgang über Bergen
Sonnenaufgang
Küstenlinie mit Wellen
Küstenlinie
Waldweg im Morgenlicht
Waldweg
Citylights bei Nacht
Citylights

Demo 2 – Zoom‑on‑View (sichtbar ⇒ sanfter Zoom)

Sobald ein Bild mindestens ~35 % im Viewport ist, fügt der Intersection Observer die Klasse .is-inview hinzu. Mit :has() kann der Container darauf reagieren – das ist besonders praktisch, wenn Captions, Rahmen oder Overlays vom Sichtbarkeitszustand abhängen sollen.

Gebirgskette
Gebirgskette
Stadt bei Nacht
Stadt bei Nacht
See im Nebel
See im Nebel
Sanddünen
Sanddünen
Wie funktioniert das technisch?
  • Scroll‑Snap: Die Galerie ist ein horizontaler Grid‑Strom. Mit scroll-snap-type: x mandatory und scroll-snap-align: start rasten Karten beim Scrollen ein – ganz ohne JS.
  • Zoom‑on‑View: Ein Intersection Observer setzt/entfernt .is-inview an Bildern. Moderne Browser erlauben dann .zoom-card:has(img.is-inview) – der Container ändert den Stil des Bildes (und könnte zusätzlich Schatten, Ränder, Overlays steuern). Fallback: dieselbe Regel adressiert direkt img.is-inview, falls :has() fehlt.