Tu web en tres pasos
Tres opciones claras, sin letra pequeña.
Colores, logo y dominio en dos minutos.
Tu web en línea con un solo botón.
Schritte mit fixiertem Smartphone
Beim Scrollen ziehen die Schritte vorbei, während links ein Smartphone fixiert bleibt und den Bildschirm wechselt.
Einstellungen
Code
<div class="uv-tss"><div class="sc" tabindex="0" aria-label="Deine Website in drei Schritten"><div class="gr"><div class="vs" aria-hidden="true"><div class="ph"><span class="fc on" style="--c:#6366f1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2.5"/><path d="M8 10h8M8 14h5"/></svg></span><span class="fc" style="--c:#ec4899"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="9" cy="10" r="1.2" fill="currentColor"/><circle cx="14.5" cy="9" r="1.2" fill="currentColor"/><circle cx="15.5" cy="14" r="1.2" fill="currentColor"/></svg></span><span class="fc" style="--c:#10b981"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c3 2.5 4.5 5.5 4.5 9l-2 3h-5l-2-3c0-3.5 1.5-6.5 4.5-9zM9.5 15l-2.5 4M14.5 15l2.5 4M12 9.5v.01"/></svg></span><i class="bar"></i></div></div><div class="ls"><h3>Deine Website in drei Schritten</h3><section class="on"><span>01</span><b>Wähle deinen Tarif</b><p>Drei klare Optionen, kein Kleingedrucktes.</p></section><section><span>02</span><b>Anpassen</b><p>Farben, Logo und Domain in zwei Minuten.</p></section><section><span>03</span><b>Veröffentlichen</b><p>Deine Website online mit einem Klick.</p></section><div class="end"></div></div></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 klassisches Scrollytelling Layout für Onboarding oder Produkttouren. Ein Smartphone steht in einer fixierten Spalte und wechselt zwischen drei farbigen Bildschirmen mit Symbolen, während rechts die Schritte vorbeiziehen. Der Schritt in der Mitte wird hervorgehoben, die anderen treten zurück, damit die Aufmerksamkeit bei einer Idee bleibt.
Das Skript vergleicht jeden Schritt mit der Mitte des Containers und schaltet eine Klasse um, die Übergänge der Bildschirme erledigt CSS. Bearbeite Titel, Beschreibungen, Farben und Symbole der Schritte, um deinen eigenen Ablauf zu zeigen.