📝 Effet Machine à Écrire en CSS et JavaScript : Tutoriel Facile et Dynamique

✍️ Effet Machine à Écrire : Simple CSS ou Magie JavaScript ?

Vous voulez donner vie à votre texte avec un effet de machine à écrire ? Bonne nouvelle, c’est super facile à faire, et vous avez deux options :

• ⚡ Une version ultra-légère en CSS

• 🔥 Une version plus dynamique avec JavaScript

Suivez le guide !

🖋️ Étape 1 : La Version CSS Seule

Objectif : Simuler une frappe de machine à écrire uniquement avec du CSS.

🎯 Pourquoi choisir cette solution ?

• ✅ Facile à mettre en place

• ✅ Pas besoin de JavaScript

• ✅ Idéal pour de simples animations statiques

🧠 Comment fonctionne l’algorithme ?

L’idée est simple : nous allons simuler un effet de frappe et d’effacement, comme si quelqu’un tapait à la machine à écrire. Voici la logique que nous allons suivre :

1️⃣ Afficher une lettre à la fois

• On commence avec une phrase vide.

• À intervalles réguliers, on ajoute une lettre de la phrase en cours.

• Une fois que toute la phrase est affichée, on attend un moment avant de passer à l’étape suivante.

2️⃣ Effacer la phrase progressivement

• Au bout d’un certain temps, on commence à supprimer les lettres une par une.

• On continue jusqu'à ce que le texte disparaisse complètement.

3️⃣ Passer à la phrase suivante

• Une fois la phrase effacée, on passe à la suivante dans notre liste.

• Si on arrive à la dernière phrase, on recommence depuis le début pour un effet infini.

4️⃣ Gérer la vitesse et le timing

• La vitesse d’ajout et d’effacement des lettres peut être ajustée pour un effet plus naturel.

• On ajoute un petit délai avant d’effacer pour laisser le temps aux utilisateurs de lire.

En suivant cette logique, on obtient un effet fluide et naturel qui capte l’attention sans nécessiter d’animations complexes. Maintenant, passons au code ! 🚀

📝 Code :

<div class="typewriter">
  <p>Bonjour, je suis un texte animé !</p>
</div>

.typewriter p {
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  display: inline-block;
  border-right: 2px solid;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3s steps(30) infinite, blink 0.5s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

Comment ça marche ?

• @keyframes typing → Simule la frappe en augmentant progressivement la largeur du texte.

• steps(30) → Définit le nombre de "sauts" pour un effet plus réaliste.

• @keyframes blink → Fait clignoter le curseur comme une vraie machine à écrire.

Quand l'utiliser ?

Parfait si vous voulez une animation simple et statique. Mais… ce n'est pas dynamique : une fois l'animation jouée, le texte ne change pas. 😢

⚡ Étape 2 : Version Dynamique avec JavaScript

Et si on voulait un effet plus interactif, avec plusieurs phrases qui s’enchaînent ? 🎩✨
C’est là que le JavaScript entre en scène !

Pourquoi passer au JS ?

• ✅ Afficher plusieurs phrases à la suite

• ✅ Contrôler la vitesse et les délais

• ✅ Rendre l'effet plus dynamique et interactif

📝 Code :

<div class="typewriter">
  <p id="typewriter-text"></p>
</div>

.typewriter p {
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  display: inline-block;
  border-right: 2px solid;
  white-space: nowrap;
  overflow: hidden;
  animation: blink 0.5s step-end infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

const phrases = [
  "Bonjour, je suis un texte animé !",
  "Apprenez à coder avec nous.",
  "Découvrez de nouvelles astuces chaque jour !"
];

let phraseIndex = 0; // Index pour suivre la phrase en cours
const typingSpeed = 100; // Vitesse de frappe en millisecondes
const erasingSpeed = 50; // Vitesse d'effacement en millisecondes

const typewriterText = document.getElementById('typewriter-text');

/**
 * Fonction qui simule la frappe d'une phrase
 */
function type() {
  const currentPhrase = phrases[phraseIndex]; // Récupère la phrase actuelle
  const currentLength = typewriterText.textContent.length; // Longueur du texte affiché

  if (currentLength < currentPhrase.length) {
    // Ajoute une lettre à la fois
    typewriterText.textContent += currentPhrase.charAt(currentLength);
    setTimeout(type, typingSpeed); // Continue après un délai
  } else {
    // Une fois la phrase complète, on attend avant d'effacer
    setTimeout(erase, 1500);
  }
}

/**
 * Fonction qui efface progressivement la phrase affichée
 */
function erase() {
  const currentLength = typewriterText.textContent.length;

  if (currentLength > 0) {
    // Supprime une lettre à la fois
    typewriterText.textContent = phrases[phraseIndex].substring(0, currentLength - 1);
    setTimeout(erase, erasingSpeed); // Continue après un délai
  } else {
    // Passe à la phrase suivante une fois le texte complètement effacé
    phraseIndex = (phraseIndex + 1) % phrases.length; // Boucle sur les phrases
    setTimeout(type, typingSpeed); // Relance la frappe
  }
}

// Lance l'animation une fois la page chargée
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(type, 1000); // Petit délai avant de démarrer
});

Décryptons le code

• phrases → Tableau contenant plusieurs messages à afficher.

• type() → Ajoute une lettre après l’autre.

• erase() → Efface le texte pour passer au suivant.

• typingSpeed & erasingSpeed → Gèrent la vitesse de frappe et d’effacement.

Quand l'utiliser ?

Si vous voulez un effet plus vivant, qui affiche plusieurs phrases à la suite. C’est un excellent moyen d’ajouter du dynamisme à une page web !

🎨 Alors, CSS ou JavaScript ?

Si vous cherchez une animation simple, CSS suffit. Mais pour une interaction plus fluide et réaliste, JavaScript est votre meilleur allié !

👉 Bonus : Vous pouvez même combiner les deux pour encore plus d'effets !

Alors, prêt(e) à donner vie à vos textes ? Essayez et partagez vos créations ! 😎