Webs para
Tambour de mots rotatif
Une phrase qui finit sur un rouleau de métal : au défilement ou aux flèches, les mots tournent comme un cadenas à code.
Réglages
Code
<div class="uvq14-drm"><p class="lb" id="uvq14-drm-l">Des sites pour</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">boutiques</div><div role="option" id="uvq14-drm-3" aria-selected="false">cliniques</div><div role="option" id="uvq14-drm-4" aria-selected="false">groupes</div><div role="option" id="uvq14-drm-5" aria-selected="false">mariages</div></div><i class="wn" aria-hidden="true"></i></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.
Plus dans Texte et défilement
Voir tout : Texte et défilementOù l’utiliser
Ce titre se termine sur un tambour en métal brossé, comme les molettes d'un cadenas à code. Les mots sont dans un conteneur avec scroll snap, et quelques lignes de JavaScript inclinent chacun en 3D selon sa distance à la fenêtre centrale. C'est une façon tactile de montrer à qui s'adresse un produit, sur une page d'accueil, un site d'agence ou un outil de réservation.
Change le début de la phrase dans le champ de texte et les mots dans la liste. La couleur principale encadre la fenêtre et le mot choisi, la secondaire colore les autres. Le tambour se comporte comme une liste d'options : flèches, Début et Fin le déplacent, et le choix est annoncé.