Typewriter Delete
Un setTimeout récursif tape et efface des mots en boucle — curseur clignotant CSS, vitesses de frappe et suppression indépendantes, cycle infini.
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'animation repose sur un setTimeout récursif — sans requestAnimationFrame. À chaque appel, une seule propriété textContent du <span> est mise à jour avec un substring(0, n) du mot courant : n augmente d'un lors de la frappe, diminue d'un lors de la suppression. Deux délais coexistent : 100 ms par caractère ajouté, 50 ms par caractère supprimé (2× plus rapide).
Le curseur clignotant est entièrement CSS : une border-right: 3px solid #22d3ee posée sur le <span> lui-même, animée par @keyframes blinkCursor qui bascule border-color: transparent à 50 % avec une timing-function step-end — le clignotement est une bascule franche, sans fondu progressif.
Quand charIndex atteint la longueur du mot, une pause de 1 500 ms s'écoule avant le déclenchement de la suppression (isDeleting = true). Quand l'index revient à 0, une pause de 300 ms précède le mot suivant — obtenu par typewriterIndex = (typewriterIndex + 1) % typewriterWords.length. Le tableau défile en boucle infinie.
La fonction replayTypewriterDelete() vide le textContent, remet tous les compteurs à zéro et relance le cycle depuis le premier mot — prévue pour se brancher sur un bouton ou un événement métier. Elle doit être exposée sur window si elle est appelée via un attribut onclick inline (hors IIFE).
Accessibilité
- Pas de prefers-reduced-motion : ni le CSS ni le JS ne vérifient cette préférence — le curseur clignote et les mots cyclent indéfiniment même si l'OS signale de réduire le mouvement. À ajouter manuellement si votre audience y est sensible.
- Contraste couleur : le texte
#22d3eesur fond#0a0a0fatteint un ratio > 8:1 — largement au-dessus du seuil WCAG AA (4,5:1). - Le texte est du vrai
textContentDOM, pas une image : les lecteurs d'écran lisent les mots affichés, mais l'absence dearia-liveourole="status"signifie que les changements de contenu ne sont pas annoncés automatiquement. - Le bouton Replay est un
<button>natif — focusable au clavier (Tab + Entrée), dans le flux de tabulation normal. - Le curseur CSS (
border-rightclignotant) est purement décoratif et ne nécessite pas d'équivalent texte ou aria.
Compatibilité navigateur
Utilise setTimeout, textContent et des animations CSS — disponibles dans tous les navigateurs depuis plus de 10 ans. Zéro dépendance externe.
Si JavaScript est désactivé, le <code><span></code> reste vide — aucune erreur fatale, la page reste fonctionnelle. Le curseur CSS clignote seul.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-typewriter-delete" id="typewriterDeleteText"></span>
<!-- Le bouton appelle replayTypewriterDelete() — exposez-la sur window si nécessaire -->
<button class="replay-btn" onclick="replayTypewriterDelete()">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 |
|---|---|---|
| typewriterWords (JS, ligne 3) | ['CREATE', 'DESIGN', 'BUILD', 'INSPIRE'] | Tableau des mots à cycler — remplacez par vos propres chaînes. Longueur illimitée, le défilement est modulaire. |
| .text-typewriter-delete { color } | #22d3ee | Couleur du texte ET du curseur clignotant — un seul changement suffit car border-color hérite de color si non surchargé. |
| .text-typewriter-delete { border-right-width } | 3px | Épaisseur du curseur. 2px pour un curseur fin, 4–5px pour un curseur épais à la façon terminal. |
| delay = 100 (frappe, JS) | 100 ms | Délai entre chaque caractère ajouté. 60–80 ms = frappe rapide, 150–200 ms = rendu « humain » avec hésitations. |
| delay = 50 (suppression, JS) | 50 ms | Délai entre chaque caractère effacé. La suppression est 2× plus rapide que la frappe par défaut — ajustez le ratio à votre goût. |
| delay = 1500 (pause après mot, JS) | 1 500 ms | Temps d'affichage du mot complet avant que la suppression ne commence. 800 ms = rythme vif, 2 500 ms = lecture confortable. |
| delay = 300 (pause entre mots, JS) | 300 ms | Attente entre la fin de la suppression et le début du mot suivant. 0–100 ms donne un rendu mécanique, 500 ms un rythme posé. |
| .demo-text { font-size } | 2.5rem | Taille du texte. L'effet fonctionne de 0.9rem (placeholder d'input) à 5rem (hero plein écran) sans modification de la logique JS. |
FAQ
prefers-reduced-motion. Pour respecter cette préférence, ajoutez au début de la fonction de démarrage : if (window.matchMedia('(prefers-reduced-motion:reduce)').matches) return; — l'effet ne se lancera pas sur les systèmes concernés.window.replayTypewriterDelete = replayTypewriterDelete; à l'intérieur de l'IIFE (avant la fermeture), puis appelez window.replayTypewriterDelete() depuis n'importe quel événement — rechargement de section, fin de vidéo, scroll trigger, etc.id="typewriterDeleteText". Pour plusieurs instances, transformez la logique en fonction d'usine : function makeTypewriter(el, words, opts) { … } avec son propre état local (index, charIndex, isDeleting, timer), et appelez-la sur chaque élément cible.
