Elástico
Lettres élastiques à ressort
Tire une lettre et les autres la suivent comme reliées par des ressorts ; au relâchement, toutes reviennent en place en tremblant.
Réglages
Code
<div class="uvq14-spr"><h3 class="sr">Élastique</h3><div class="st" aria-hidden="true" translate="no">Élastique</div><div class="ft"><span class="hi" aria-hidden="true">Fais glisser les lettres</span><button type="button" class="kk" aria-describedby="uvq14-spr-h">Secouer</button><span class="sr" id="uvq14-spr-h">Marche aussi avec les flèches du clavier</span></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
Chaque lettre de ce titre est une petite simulation de ressort : attrape n'importe laquelle et ses voisines s'étirent derrière elle, d'autant moins qu'elles sont loin, puis reviennent en dépassant un peu leur position. Quelques lignes de JavaScript gèrent le tout avec de simples transformations. Il apporte du jeu aux accueils de portfolio, aux marques pour enfants et aux pages produit façon jouet.
Change le mot dans le champ de texte et les lettres se reconstruisent toutes seules. Le bouton secoue le mot entier et les flèches le poussent dans leur direction, donc l'effet marche aussi sans souris. Avec le mouvement réduit, les ressorts rebondissent à peine.