HTML + CSSOverlays

Story-Viewer im Vollbild

Tippe auf einen Avatar und seine Story wächst auf Bildschirmgröße, mit Fortschrittsbalken, Tippen am Rand und Pause beim Halten.

Einstellungen

16px
1x

Code

<div class="uvq13-sty"><div class="tray"><button type="button" class="av" style="--a:#f97316" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">L</b></span><small>Lucía</small></button><button type="button" class="av" style="--a:#0ea5e9" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">M</b></span><small>Marco</small></button><button type="button" class="av" style="--a:#a855f7" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">I</b></span><small>Inés</small></button><button type="button" class="av" style="--a:#22c55e" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">T</b></span><small>Teo</small></button></div><div class="fd" aria-hidden="true"><i class="ph"></i><i></i><i class="s"></i></div><div class="vw" role="dialog" aria-modal="true" aria-label="Stories"><div class="cd"><div class="sc" data-s="sun" style="--g1:#fb923c;--g2:#6d28d9"><p>Sonnenaufgang am Hafen</p></div><div class="sc" data-s="cup" style="--g1:#7c2d12;--g2:#f59e0b"><p>Kaffee um acht</p></div><div class="sc" data-s="hill" style="--g1:#0ea5e9;--g2:#16a34a"><p>Radtour an der Küste</p></div><div class="sc" data-s="dots" style="--g1:#db2777;--g2:#facc15"><p>Neues Wandbild im Viertel</p></div><div class="sc" data-s="sun" style="--g1:#92400e;--g2:#fde68a"><p>Frisch gebackenes Brot</p></div><div class="sc" data-s="wave" style="--g1:#0e7490;--g2:#67e8f9"><p>Letztes Bad des Jahres</p></div><div class="sc" data-s="rain" style="--g1:#1e293b;--g2:#64748b"><p>Regen am Fenster</p></div><div class="sc" data-s="dots" style="--g1:#4c1d95;--g2:#f472b6"><p>Konzert im Park</p></div><div class="bars" aria-hidden="true"><i><b></b></i><i><b></b></i></div><div class="hd"><span class="ua" aria-hidden="true"></span><b class="un"></b><small>2 h</small><button type="button" class="pz" aria-label="Pausieren" aria-pressed="false"><svg class="i1" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="i2" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14M16 5v14" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg></button><button type="button" class="x" aria-label="Schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="nv pv" aria-label="Vorherige Story"></button><button type="button" class="nv nx" aria-label="Nächste Story"></button></div></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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Stories sind längst ein eigenes Muster, und dieses Overlay baut den ganzen Viewer nach. Die Karte wächst aus dem angetippten Avatar, segmentierte Balken füllen sich mit der Zeit, ein Tipp rechts oder links springt vor oder zurück, Halten pausiert und blendet die Oberfläche aus, Wischen nach unten schließt. Jede Szene ist mit CSS-Verläufen gemalt. Passt zu sozialen Apps, Produktneuheiten und Event-Rückblicken.

Die beiden Farben malen den Ring um ungesehene Stories. Ersetze die Szenen durch Bilder oder Videos, behalte zwei Stories pro Person oder ergänze Balken, und nutze Pfeiltasten, Pausenknopf und Escape über die Tastatur.