Scramble Text
Au survol, chaque lettre se brouille en glyphes aléatoires puis se révèle de gauche à droite — effet de déchiffrement cyberpunk, zéro dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
À l'événement mouseenter, un setInterval à 30 ms démarre sur l'élément cible. À chaque tick, le texte est reconstruit caractère par caractère : les positions dont l'indice est inférieur à iterations conservent leur lettre originale, les autres sont remplacées par un glyphe tiré aléatoirement dans le pool 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*'.
Le compteur iterations progresse de 1/3 à chaque tick : chaque position traverse environ 3 frames de brouillage avant d'être fixée, soit ~90 ms par lettre révélée. Sur un mot de 8 caractères comme « SCRAMBLE », la résolution complète prend ~720 ms — assez long pour être lisible, assez court pour rester percutant. Au mouseleave, l'intervalle est effacé et le texte original est restauré instantanément.
La CSS impose font-family: monospace et un letter-spacing: 2px fixe sur .text-scramble. Ces deux règles sont essentielles : en fonte monospace, chaque glyphe occupe exactement la même chasse — le bloc de texte ne tremble pas pendant la substitution aléatoire et aucun layout shift ne se produit à chaque frame.
Accessibilité
- Pas de prefers-reduced-motion : le code ne teste pas cette media query — sur les systèmes configurés pour réduire le mouvement, l'animation de brouillage s'exécute normalement. À implémenter selon le contexte d'usage.
- Keyboard inaccessible : l'effet est déclenché uniquement par
mouseenter— aucun listenerfocusn'est défini. Les utilisateurs naviguant au clavier ne verront pas l'animation. - Pas d'
aria-livesur l'élément : les mutations rapides du contenu textuel ne sont pas annoncées. Un lecteur d'écran lit le texte original au focus, non les glyphes intermédiaires. - Contraste du texte à l'état stable (blanc #ffffff sur fond sombre #0a0a0f) : ratio > 18:1, largement conforme WCAG AA et AAA.
- L'élément
<span>n'a pas deroleni d'aria-labelexplicite — il est traité comme du texte inline standard par les technologies d'assistance.
Compatibilité navigateur
Nécessite uniquement setInterval, mouseenter/mouseleave et la manipulation de textContent — supportés universellement depuis IE 9.
Sans JS, le texte original reste affiché — aucune dépendance CSS critique, le contenu reste lisible et fonctionnel.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-scramble" id="scrambleTextHover">SCRAMBLE</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| chars (constante JS) | 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*' | Pool de glyphes aléatoires utilisés pendant le brouillage. Réduire aux majuscules seules pour un style épuré ; ajouter des caractères katakana ou des symboles Unicode pour un effet matrix. |
| setInterval(…, 30) (JS) | 30 ms | Fréquence de rafraîchissement. Réduire à 20 ms pour une animation plus fluide et rapide ; augmenter à 60 ms pour un brouillage lent et lisible. |
| iterations += 1/3 (JS) | 1/3 | Vitesse de révélation par tick. 1/2 → chaque lettre fixée en 2 frames (~40 ms/lettre à 20 ms). 1/6 → 6 frames de brouillage par lettre (~180 ms/lettre). Combiner avec l'intervalle pour contrôler précisément la durée totale. |
| .text-scramble { letter-spacing } (CSS) | 2px | Espacement entre les glyphes. Augmenter à 4–6 px sur les grands titres pour aérer ; 1 px sur les petits textes. Ne pas mettre 0 : les glyphes à chasse variable créent un tremblement. |
| .demo-text { font-size } (CSS) | 2.5rem | Taille du texte. Plus il est grand, plus l'effet est spectaculaire — recommandé ≥ 2 rem pour que le brouillage soit clairement perçu. |
| .demo-text { font-weight } (CSS) | 800 | Graisse du texte. Les graisses lourdes (700–900) rendent les glyphes aléatoires plus lisibles pendant le brouillage et accentuent l'impact visuel. |
| font-family: monospace (CSS sur .text-scramble) | monospace | Police à chasse fixe requise pour la stabilité visuelle. JetBrains Mono, Fira Code ou Courier New fonctionnent. Éviter les polices proportionnelles : la largeur de ligne changerait à chaque frame. |
FAQ
getElementById('scrambleTextHover'). Pour l'appliquer à plusieurs cibles, remplacez l'initialisation par une boucle querySelectorAll('.text-scramble') et attachez les listeners mouseenter/mouseleave à chaque nœud avec sa propre variable scrambleInterval — chaque instance est indépendante.font-family: monospace sur .text-scramble garantit une chasse fixe et supprime ce tremblement.setInterval (fréquence des frames) et le pas iterations += 1/3 (nombre de frames avant de fixer une lettre). Pour un brouillage long mais fluide : intervalle 20 ms + pas 1/8 (~160 ms/lettre). Pour un déchiffrement instantané : intervalle 30 ms + pas 1 (30 ms/lettre, 1 seule frame de brouillage par position).
