Webs para
Drehende Wortwalze
Ein Satz, der in einer Metallwalze endet: Beim Scrollen oder mit den Pfeiltasten drehen sich die Wörter wie bei einem Zahlenschloss.
Einstellungen
Code
<div class="uvq14-drm"><p class="lb" id="uvq14-drm-l">Websites für</p><div class="dr"><div class="sc" tabindex="0" role="listbox" aria-labelledby="uvq14-drm-l"><div role="option" id="uvq14-drm-0" aria-selected="false">Restaurants</div><div role="option" id="uvq14-drm-1" aria-selected="true">Studios</div><div role="option" id="uvq14-drm-2" aria-selected="false">Läden</div><div role="option" id="uvq14-drm-3" aria-selected="false">Praxen</div><div role="option" id="uvq14-drm-4" aria-selected="false">Bands</div><div role="option" id="uvq14-drm-5" aria-selected="false">Hochzeiten</div></div><i class="wn" aria-hidden="true"></i></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
Diese Überschrift endet in einer gebürsteten Metallwalze, wie die Räder eines Zahlenschlosses. Die Wörter stecken in einem Container mit Scroll Snap, und ein paar Zeilen JavaScript kippen jedes in 3D, je nachdem, wie weit es vom mittleren Fenster entfernt ist. So zeigst du greifbar, für wen ein Produkt gedacht ist, etwa auf Landingpages, bei Agenturen oder in Buchungstools.
Ändere den Satzanfang im Textfeld und die Wörter in der Liste. Die Hauptfarbe rahmt das Fenster und das gewählte Wort, die Zweitfarbe färbt die übrigen. Die Walze verhält sich wie eine Listbox: Pfeiltasten, Pos1 und Ende bewegen sie, die Auswahl wird angesagt.