Entrevistamos a quien usará el producto.
Cómo trabajamos
Prototipos que se pueden tocar en días.
Código limpio, rápido y accesible.
Medimos, aprendemos y mejoramos.
HTML + CSSText & Scroll
Karten, die sich beim Scrollen stapeln
Jede Karte bleibt oben haften, während die vorige schrumpft und dunkler wird, sobald die nächste darüber gleitet.
Einstellungen
16px
1x
Code
<div class="uv-tsc"><div class="sc" tabindex="0" aria-label="So arbeiten wir"><h3>So arbeiten wir</h3><article style="--c:#6366f1;--i:0"><span class="n">01</span><b>Recherche</b><p>Wir sprechen mit den späteren Nutzern.</p></article><article style="--c:#ec4899;--i:1"><span class="n">02</span><b>Design</b><p>Prototypen zum Anfassen in wenigen Tagen.</p></article><article style="--c:#f59e0b;--i:2"><span class="n">03</span><b>Entwicklung</b><p>Sauberer, schneller, barrierefreier Code.</p></article><article style="--c:#10b981;--i:3"><span class="n">04</span><b>Launch</b><p>Wir messen, lernen und verbessern.</p></article><div class="end"></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Scrollen</span></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 Ablauf in vier farbigen Karten, die sich beim Scrollen aufeinanderlegen. Jede Karte nutzt position sticky mit etwas größerem Abstand als die vorige, sodass die Kanten früherer Schritte wie bei einem Kartenstapel sichtbar bleiben. Deckt eine neue Karte die vorige ab, schrumpft diese und wird dunkler.
Gescrollt wird in einem eigenen Container, daher funktioniert der Effekt in einer Demo, einem Modal oder jedem Seitenabschnitt. Ein kleines Skript misst nur die Überlappung und setzt eine Variable pro Karte. Tausche Titel, Texte und Farben gegen deine eigene Geschichte.