Text Scramble
Au survol, toutes les lettres passent simultanément en caractères aléatoires puis se révèlent de gauche à droite pendant le survol, 30 ms par étape.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0373-root contient un élément .tsx-text avec l'attribut data-text contenant le texte final. Au chargement, le script lit cet attribut et l'assigne comme aria-label pour que les lecteurs d'écran lisent le texte final, indépendamment de l'état visuel. L'élément reçoit tabindex="0" role="text" pour être focusable au clavier.
Au mouseenter (ou focus), l'animation de désintégration démarre : chaque lettre est remplacée aléatoirement par un caractère du pool alphanumérique (36 caractères : A-Z et 0-9) à raison d'une passe toutes les 30 ms. L'animation de réinstallation démarre à mouseleave (ou blur) : les lettres correctes sont restaurées de gauche à droite, une par une, au même rythme de 30 ms. L'état de survol peut être réactivé pendant la réinstallation, interrompant celle-ci.
Sous prefers-reduced-motion: reduce, le texte s'affiche directement dans son état final sans aucune animation intermédiaire : au survol, il passe instantanément au texte défini dans data-text. Les touches Entrée et Espace déclenchent le même scramble que le clic/survol, pour l'accessibilité clavier.
Accessibilité
- Lecteurs d'écran : le texte visible (
.tsx-visual) portearia-hidden="true"; un élément visuellement masqué (.tsx-sr) contient en permanence le texte final. Les lecteurs d'écran lisent toujours ce texte réel — les caractères brouillés ne sont jamais annoncés. - Clavier : l'élément est focusable par Tab (
tabindex="0"). Les événementsfocusetblurdéclenchent les mêmes animations quemouseenteretmouseleave. Entrée et Espace peuvent aussi déclencher le scramble. - Mouvement réduit : sous
prefers-reduced-motion: reduce, aucune animation intermédiaire n'a lieu ; le texte final s'affiche directement au survol et reste affiché à la sortie. Zéro changement de lettre animé. - Sémantique : l'élément
.tsx-textest un<div>focusable sans rôle ARIA supplémentaire. Si l'effet est appliqué à un titre ou un lien, conservez la sémantique HTML native (<h2>,<a>) et appliquez le JS dessus.
Compatibilité navigateur
JS + CSS, moins de 1,5 Ko, aucune dépendance. Les animations sont pilotées par setInterval à 30 ms. Compatible avec tous les navigateurs modernes. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : désintégration et réinstallation identiques dans les trois. L'effet n'utilise pas requestAnimationFrame : le rythme de 30 ms est constant quelle que soit la fréquence d'affichage.
Sans JavaScript, le texte de l'élément .tsx-text s'affiche tel quel, sans animation. Sur mobile sans survol, l'effet se déclenche au focus (tap sur l'élément) ; il reste visible tant que l'élément est focusé.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0373-root">
<div class="tsx-text" data-text="Votre texte" tabindex="0">Votre texte</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Texte affiché (HTML — attribut data-text) |
"HOVER ME" | Remplacez par n'importe quel texte. Le contenu visible initial peut être identique (HOVER ME) ou différent — le scramble affichera toujours la valeur de data-text comme état final. |
Vitesse d'animation (JS — 30 ms par passe) |
30 ms par étape | Diminuez à 20 ms pour un rendu rapide et nerveux, augmentez à 60 ms pour un décodage lent et contemplatif. |
Pool de caractères (JS — tableau chars) |
A-Z et 0-9 (36 caractères) | Remplacez par des symboles (!@#$%^&*) pour un rendu plus ésotérique, par des chiffres seuls (0-9) pour un rendu numérique, ou par des caractères d'une autre langue. |
Fonte (CSS — font-family sur .tsx-text) |
héritée du document | Une fonte monospace (Courier New, JetBrains Mono) est recommandée : les caractères de largeur fixe empêchent le texte de vibrer latéralement pendant le scramble. |
| Déclencheur (JS — événements) | mouseenter / mouseleave + focus / blur |
Pour déclencher le scramble au clic plutôt qu'au survol, remplacez les écouteurs par click. Pour une animation automatique au chargement, appelez la fonction de désintégration sans événement. |
FAQ
.fx-0373-root que nécessaire ; chaque instance est isolée par document.querySelectorAll. Chacune a son propre data-text, son propre intervalle et sa propre animation..tsx-text) et dans l'aria-label ; les moteurs de recherche le lisent normalement. Veillez à ce que le contenu de data-text et le contenu initial soient identiques pour éviter toute confusion.
