Comment créer un effet de texte obfusqué en React.js
Vous avez sûrement déjà vu cet effet sympa où le texte d'une page web semble se brouiller et se transformer aléatoirement avant de revenir à la normale. Aujourd'hui, nous allons voir ensemble comment reproduire cet effet de texte obfusqué dans une application React.js. Suivez ce guide et découvrez comment donner un coup de peps à vos projets front-end !
Pourquoi utiliser cet effet ?
Avant de plonger dans le code, voyons rapidement pourquoi et dans quels cas cet effet pourrait être utile :
- Masquer du texte : par exemple, si vous créez un site en mode escape game.
- Cacher des spoilers : utilisez-le pour masquer des informations sensibles comme par exemple qui à tiré qui au sort dans une secret santa un peu à la manière de cadeaux-secret.fr !
- Effet visuel interactif : si vous voulez donner un peu de dynamisme à un élément statique de votre site web.
Étape 1 : Définissez votre alphabet
Avant de pouvoir obfusquer du texte, il nous faut une base d'alphabets que l’on utilisera pour remplacer chaque caractère. Voici comment le faire en définissant trois groupes de caractères : voyelles, consonnes, et caractères spéciaux.
1const alphabet = {
2 vowels: 'aeiouy'.split(''),
3 consonants: 'bcdfghjklmnpqrstvwxyz'.split(''),
4 specials: ['!', '@', '#', '$', '%', '&', '*'],
5};
6Étape 2 : Récupérer et transformer le texte
Prenez le texte que vous voulez obfusquer et convertissez-le en tableau de caractères. Ensuite, pour chaque caractère, remplacez-le par un autre caractère provenant de l'alphabet que vous avez défini.
1const obfuscateText = (text, useSpecials = false) => {
2 const obfuscatedArray = text.split('').map((char) => {
3 if (alphabet.vowels.includes(char.toLowerCase())) {
4 return alphabet.vowels[Math.floor(Math.random() * alphabet.vowels.length)];
5 } else if (alphabet.consonants.includes(char.toLowerCase())) {
6 return alphabet.consonants[Math.floor(Math.random() * alphabet.consonants.length)];
7 } else if (useSpecials && alphabet.specials.includes(char)) {
8 return alphabet.specials[Math.floor(Math.random() * alphabet.specials.length)];
9 }
10 return char;
11 });
12
13 return obfuscatedArray.join('');
14};
15Étape 3 : Répétez le processus
Pour obtenir un effet d’obfuscation dynamique, mettez en place un intervalle qui va actualiser le texte toutes les 100ms, par exemple :
1setInterval(obfuscateText, 100);Étape 4 : Ajouter un bouton pour démarrer/arrêter l’obfuscation
Si vous voulez que l’utilisateur puisse interagir avec l’effet (le démarrer ou l’arrêter), voici une méthode simple. Ajoutez un état booléen pour déclencher l’effet lorsque c’est activé, et arrêtez-le quand c’est désactivé. Pensez à gérer le nettoyage de l’intervalle avec useEffect lorsque le composant est démonté.
1import React, { useState, useEffect } from 'react';
2
3const ObfuscationComponent = () => {
4 const [isObfuscating, setIsObfuscating] = useState(false);
5 const [text, setText] = useState('This is a secret message.');
6
7 useEffect(() => {
8 let interval;
9 if (isObfuscating) {
10 interval = setInterval(() => {
11 setText(obfuscateText(text));
12 }, 100);
13 } else {
14 setText('This is a secret message.');
15 }
16 return () => clearInterval(interval);
17 }, [isObfuscating]);
18
19 return (
20 <div>
21 <p>{text}</p>
22 <button onClick={() => setIsObfuscating(!isObfuscating)}>
23 {isObfuscating ? 'Stop Obfuscation' : 'Start Obfuscation'}
24 </button>
25 </div>
26 );
27};
28
29export default ObfuscationComponent;
30Conclusion
Voilà, vous savez désormais comment créer un effet de texte obfusqué dans React.js ! Ce genre d’effet visuel peut vraiment faire la différence sur une interface et ajouter une touche d'originalité à vos projets.
Si vous voulez voir l'intégralité du code ou l'essayer directement, vous pouvez trouver la démo complète sur CodeSandBox.
J'espère que ce tutoriel vous a plu et que vous intégrerez cet effet dans vos projets futurs. À vous de jouer !
