Scramble Text
Un setInterval à 30 ms remplace chaque caractère par un symbole aléatoire parmi 42, puis les révèle de gauche à droite au rythme d'un tiers de position par tick — l'effet décodeur se déclenche au survol.
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
Au mouseenter, un setInterval se lance toutes les 30 ms. À chaque tick, le contenu textuel entier est reconstruit : les positions d'index inférieur à iterations restituent le caractère original, les suivantes tirent aléatoirement parmi 42 symboles (A–Z, 0–9, @#$%&*). Le résultat est réaffecté d'un coup via textContent — pas de manipulation char par char du DOM.
iterations progresse de 1/3 par tick : chaque position reste brouillée environ trois ticks (≈ 90 ms) avant d'être figée sur le bon caractère. La révélation avance strictement de gauche à droite — l'œil perçoit un décodeur progressif plutôt qu'un simple bruit aléatoire.
L'intervalle s'arrête dès que iterations >= originalText.length (tous les caractères révélés). Sur mouseleave, clearInterval vide l'intervalle en cours et textContent est restauré instantanément à la valeur originale — aucune animation de sortie.
L'élément cible porte la police "Courier New", monospace : largeur de glyphe fixe quel que soit le symbole, zéro saut de mise en page pendant le remplacement. La couleur indigo #6366f1 renforce la connotation terminal/système.
Accessibilité
- prefers-reduced-motion : absent du code — l'effet se lance même si l'OS demande des animations réduites. Ajoutez
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;en tête du gestionnairemouseenterpour désactiver le scramble. - Pas de déclenchement clavier : l'effet est lié à
mouseenter/mouseleaveuniquement — les utilisateurs navigant au clavier ne voient pas l'animation. Recommandation : dupliquer les mêmes handlers surfocus/blur. - La mise à jour répétée de
textContentpeut être annoncée par certains lecteurs d'écran à chaque tick. Recommandation : ajouteraria-hidden="true"sur l'élément scramblé et un<span class="sr-only">avec le texte statique hors flux. - Le texte original reste lisible avant le survol et est restauré immédiatement sur
mouseleave— aucun état bloqué. - La police monospace garantit une largeur de ligne stable pendant le scramble : pas de recalcul de layout, pas de décalage de contenu adjacent.
Compatibilité navigateur
Nécessite setInterval et textContent — supportés dans tous les navigateurs depuis 2010. Zéro dépendance externe.
Sans JS, le texte reste statique, stylé en monospace indigo — rendu cohérent, aucune erreur fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text splitting-text-scramble" id="scrambleTextHover">VOTRE TEXTE</span>
<!-- Optionnel : bouton Replay -->
<button class="replay-btn" onclick="replayScramble()">Replay</button>
</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 (JS, ligne 7) | 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*' | Jeu de 42 symboles de remplacement. Réduisez à 'ABCDEF0123456789' pour un rendu hexadécimal, ou '!@#$%^&*' pour un ton plus agressif. |
| setInterval (JS, ligne 14) | 30 | Délai en ms entre deux ticks. 20 ms = décodeur ultra-rapide ; 60 ms = déchiffrement lent et dramatique. |
| iterations += (JS, ligne 22) | 1/3 | Pas de révélation par tick. 1/3 → 3 ticks/char (~90 ms/char) ; 1/2 → ~60 ms/char (vif) ; 1/6 → ~180 ms/char (lent). |
| color (.splitting-text-scramble) | #6366f1 | Couleur du texte scramblé (et de l'état final). Remplacez par votre couleur brand. |
| font-family (.splitting-text-scramble) | "Courier New", monospace | Police monospace obligatoire pour éviter le saut de largeur. Remplacez par 'JetBrains Mono', 'Fira Code' ou toute police monospace installée. |
| font-size (.demo-text) | 2.5rem | Taille du texte. Plus le texte est grand, plus l'effet est visible ; adaptez à votre hiérarchie typographique. |
FAQ
getElementById('scrambleTextHover'). Si votre span a un id différent (par ex. id="scrambleText"), ajoutez id="scrambleTextHover" à votre élément ou modifiez la ligne getElementById pour pointer vers votre id réel.mouseenter par un appel direct après initialisation : supprimez le bloc addEventListener('mouseenter', ...) et placez son contenu (le setInterval) directement dans l'IIFE, après la déclaration de scrambleInterval. Le bouton Replay peut alors redéclencher via scrambleEl.dispatchEvent(new Event('mouseenter')).getElementById par querySelectorAll('.splitting-text-scramble') et initialisez chaque élément dans une boucle — chacun a besoin de son propre scrambleInterval et de sa propre copie d'originalText.
