Destinos
Einrastendes Karussell mit Mittenzoom
Horizontale Karten mit Scroll Snap, bei denen die mittlere Karte wächst und leuchtet und die seitlichen schrumpfen.
Einstellungen
Code
<div class="uv-tsn"><p class="ti">Reiseziele</p><div class="sc" tabindex="0" aria-label="Reiseziele"><article style="--a:#86efac;--b:#15803d"><b>Berge</b></article><article style="--a:#fde68a;--b:#d97706"><b>Wüste</b></article><article style="--a:#93c5fd;--b:#1d4ed8"><b>Ozean</b></article><article style="--a:#bbf7d0;--b:#166534"><b>Wald</b></article><article style="--a:#e0f2fe;--b:#0369a1"><b>Gletscher</b></article></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Text & Scroll
Alle ansehen: Text & ScrollWofür du ihn nutzen kannst
Ein horizontaler Streifen mit Reisezielkarten, der jede Karte in der Mitte einrasten lässt. Die Karte nahe der Mitte erreicht volle Größe und Deckkraft, die Nachbarn schrumpfen und verblassen je nach Abstand, was auf Touchscreens, Trackpads und mit dem Mausrad gleichermaßen ein sanftes Coverflow Gefühl ergibt.
Das Einrasten ist reines CSS mit Scroll Snap, und ein kurzes Skript misst den Abstand jeder Karte zur Mitte, um eine Variable zu setzen. Der Streifen ist fokussierbar für die Pfeiltasten, die Ränder blenden per Maske aus. Ersetze die Verläufe durch Fotos.