HTML + CSSOverlays

Visionneuse de stories plein écran

Touche un avatar et sa story grandit jusqu'à remplir l'écran, avec barres de progression, touches sur les côtés et pause au maintien.

Réglages

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>Lever du jour sur le port</p></div><div class="sc" data-s="cup" style="--g1:#7c2d12;--g2:#f59e0b"><p>Le café de huit heures</p></div><div class="sc" data-s="hill" style="--g1:#0ea5e9;--g2:#16a34a"><p>Balade à vélo sur la côte</p></div><div class="sc" data-s="dots" style="--g1:#db2777;--g2:#facc15"><p>Nouvelle fresque dans le quartier</p></div><div class="sc" data-s="sun" style="--g1:#92400e;--g2:#fde68a"><p>Pain tout juste sorti du four</p></div><div class="sc" data-s="wave" style="--g1:#0e7490;--g2:#67e8f9"><p>Dernière baignade de l'année</p></div><div class="sc" data-s="rain" style="--g1:#1e293b;--g2:#64748b"><p>Pluie sur la vitre</p></div><div class="sc" data-s="dots" style="--g1:#4c1d95;--g2:#f472b6"><p>Concert dans le parc</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="Pause" 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="Fermer"><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="Story précédente"></button><button type="button" class="nv nx" aria-label="Story suivante"></button></div></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Overlays

Voir tout : Overlays

Où l’utiliser

Les stories sont devenues un motif à part entière, et cet overlay reconstruit toute la visionneuse. La carte grandit depuis l'avatar touché, les barres segmentées se remplissent avec le temps, une touche à droite ou à gauche avance ou recule, un appui long met en pause et masque l'interface, et un glissement vers le bas ferme. Pour une appli sociale ou un récap d'événement.

Les deux couleurs peignent l'anneau des stories non vues. Remplace les scènes par des images ou des vidéos, garde deux stories par personne ou ajoute des barres, et utilise les flèches, le bouton pause et Échap au clavier.