Scramble Text
Le texte défile à travers des symboles aléatoires puis se fige lettre après lettre, de gauche à droite, comme un décodeur — au chargement, et de nouveau à chaque clic sur « Replay ».
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 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
scrambleText(element, texteFinal, durée) découpe l'animation en 20 étapes réparties sur la durée demandée (1 500 ms dans la démo, soit une étape toutes les 75 ms). À chaque étape, le texte entier est reconstruit : les positions déjà « décodées » affichent leur vraie lettre, les suivantes tirent un symbole au hasard parmi 44 (A–Z, 0–9, !@#$%^&*). Le résultat est posé d'un coup via textContent — aucune manipulation lettre par lettre du DOM, aucun HTML injecté.
La part décodée vaut Math.floor(étape / 20 × longueur) : la révélation avance strictement de gauche à droite, d'environ une lettre toutes les trois étapes pour un mot de six lettres. À la 20ᵉ étape, l'intervalle s'arrête et le texte final est posé.
L'effet se lance une première fois au chargement (dernière ligne du script). Le bouton Replay appelle replayScramble(), seule fonction exposée sur window — le reste du code est isolé dans une IIFE et ne pollue pas votre page. Chaque lancement commence par clearInterval : un clic en pleine animation la relance proprement au lieu d'empiler deux décodages.
L'élément porte la police "Courier New", monospace : chaque symbole a la même largeur, le mot ne « saute » pas pendant le brouillage. La couleur indigo #6366f1 renforce la connotation terminal.
Accessibilité
- prefers-reduced-motion : absent du code — l'animation se joue même si le système demande des mouvements réduits. Ajoutez en tête de
scrambleText:if (matchMedia('(prefers-reduced-motion: reduce)').matches) { element.textContent = finalText; return; }. - Le déclenchement passe par un vrai
<button>: « Replay » s'active au clavier (Entrée, Espace) comme à la souris et au doigt. - Le texte est modifié 20 fois en 1,5 s. Ne placez pas l'élément dans une région
aria-live, sinon chaque étape serait lue ; pour un titre important, ajoutezaria-labelavec le texte final. - L'état final est toujours le texte exact : aucun symbole aléatoire ne peut rester affiché.
- La police monospace garde une largeur de ligne stable pendant le brouillage : pas de décalage du contenu voisin.
Compatibilité navigateur
Nécessite setInterval, textContent et la syntaxe ES2015 (fonctions fléchées, const/let, paramètre par défaut) — tous les navigateurs actuels. Zéro dépendance externe.
Sans JS, le mot reste affiché en clair, en monospace indigo — rendu cohérent, aucune erreur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<span class="demo-text splitting-text-scramble" id="scrambleText">VOTRE TEXTE</span>
<!-- Optionnel : bouton Replay -->
<button class="replay-btn" onclick="replayScramble()">Replay</button>
</div>Le code complet HTML + CSS + JS de Scramble Text, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| scrambleChars (JS, ligne 3) | 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*' | Les 44 symboles de brouillage. Réduisez à 'ABCDEF0123456789' pour un rendu hexadécimal, ou à '01' pour un effet binaire. |
| iterations (JS, ligne 7) | 20 | Nombre d'étapes du décodage. 10 = brouillage plus haché ; 40 = plus fluide (la durée totale ne change pas). |
| durée (JS, 3ᵉ argument, lignes 31 et 35) | 1500 | Durée totale en ms. 800 = décodeur vif ; 3000 = déchiffrement lent et dramatique. |
| texte (JS, 2ᵉ argument, lignes 31 et 35) | 'DECODE' | Le mot révélé. Mettez le même texte dans le <span> pour qu'il soit lisible sans JS. |
| color (.splitting-text-scramble) | #6366f1 | Couleur du texte brouillé et final. Remplacez par votre couleur de marque. |
| font-family (.splitting-text-scramble) | "Courier New", monospace | Une police monospace est indispensable pour éviter les sauts de largeur : 'JetBrains Mono', 'Fira Code'… |
FAQ
'DECODE' aux lignes 31 et 35 (lancement et bouton Replay), et mettez le même texte dans le <span id="scrambleText"> pour qu'il reste lisible si le JS ne se charge pas.var el = document.getElementById('scrambleText'); el.addEventListener('mouseenter', function () { scrambleText(el, 'DECODE', 1500); });. Le bouton Replay continue de fonctionner.splitScrambleInterval) : lancer un second élément arrête le premier. Pour des animations simultanées, rendez le minuteur propre à chaque élément — remplacez splitScrambleInterval par element._scramble aux lignes 11, 13 et 23.
