Live Typing
Chaque touche de clavier fait surgir sa lettre en rotation dans une teinte différente — les 15 derniers caractères tapés s'affichent de gauche à droite et poussent les plus anciens hors du cadre, curseur clignotant inclus. Sous mouvement réduit, le mot « effect » s'affiche statique dès le chargement.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0377-root écoute les événements keydown sur le document entier : n'importe quelle touche de caractère (un seul glyphe, e.key.length === 1) ajoute une entrée dans un tableau de 15 cases maximum ; Backspace en retire la dernière. À chaque frappe, le rendu vide la zone d'affichage .lt377-display et recrée un <span> par caractère avec une teinte calculée selon sa position (hsl(220 + i × 10, 70 %, 60 %)), de bleu au premier jusqu'à violet au quinzième, et un délai d'animation décalé de 50 ms entre chaque lettre.
L'animation lt377-pop agrandit chaque lettre à 1,3 puis la ramène à 1 en 0,4 s. Le curseur (div.lt377-cursor) clignote en boucle (lt377-blink, 0,7 s). Aucun état de départ n'est nécessaire : la zone est vide jusqu'à la première frappe, avec le seul curseur. L'effet n'utilise pas de requestAnimationFrame : il n'y a pas de boucle à arrêter hors écran.
Accessibilité
- Lecteur d'écran : la zone d'affichage porte
role="status"etaria-live="polite"; chaque frappe annonce le caractère ajouté sans interrompre ce que le lecteur lisait. L'aria-labeldécrit la zone au premier focus. - Mouvement réduit : sous
prefers-reduced-motion: reduce, aucune animation ne démarre, le délai inter-lettres est supprimé et le mot « effect » s'affiche immédiatement au chargement avec le curseur statique — l'état de l'effet est lisible sans qu'une seule lettre n'ait à bouger. - Clavier uniquement : l'effet répond au clavier physique. Sur mobile, aucun équivalent tactile n'est prévu : il n'y a pas de champ texte déclenché au toucher. Si vos utilisateurs sont sur mobile, ajoutez un champ
<input type="text">masqué qui reçoit le focus au tap et déclenche l'événementinput. - Focus et isolation : chaque copie n'écoute le clavier que lorsqu'elle a le focus. Cliquez sur la zone (ou Tab jusqu'à elle) pour l'activer — un contour indigo apparaît. Sur la même page, deux copies fonctionnent de façon indépendante : seule la zone active reçoit les frappes.
Compatibilité navigateur
Pur DOM et CSS, aucune dépendance. Fonctionne dans tous les navigateurs modernes dès que keydown, les animations CSS et querySelectorAll sont disponibles, soit depuis Chrome 4, Firefox 3.5 et Safari 4. window.matchMedia existe depuis Chrome 9, Firefox 6 et Safari 5.1. Aucune API expérimentale ni préfixée.
Sans JavaScript, la zone d'affichage reste vide. Sans CSS animations, les lettres apparaissent directement sans rebond.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0377-root">
<div class="lt377-display" role="status" aria-live="polite" aria-label="Affichage des touches tapées"></div>
<span class="lt377-label" aria-hidden="true">Tapez sur votre clavier</span>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Nombre maximal de caractères (JS — tableau de 15 cases) | 15 | Remplacez if(chars.length > 15) chars.shift() par la valeur souhaitée. 8 donne un résultat compact, 20 déborde sur les petits écrans sans ajuster la police. |
Taille des lettres (CSS — .lt377-display span { font-size }) |
2 rem | Augmentez pour un affichage monumental en hero ; descendez à 1,2 rem pour un usage en ligne dans un paragraphe. |
Palette de couleurs (JS — hsl(220 + i × 10, 70%, 60%)) |
bleu à violet, teinte de base 220, pas de 10° | 220 → 0 donne rouge à bleu ; base 0, pas 15 donne rouge à orange. Pour une couleur fixe, remplacez par un code hexadécimal constant. |
Durée de l'animation pop (CSS — @keyframes lt377-pop) |
0,4 s | 0,15 s donne un ressort très vif ; 0,8 s un rebond paresseux. |
Fond (CSS — background de .fx-0377-root) |
#0a0a0f |
Passez à transparent pour intégrer l'effet à votre décor de page. |
FAQ
keydown tant qu'aucun champ n'a le focus. Pour déclencher l'effet au toucher, ajoutez un <input type="text" style="opacity:0;position:absolute"> dans la racine, donnez-lui le focus au tap sur le cadre, et écoutez l'événement input à la place de keydown.keydown est posé sur la racine .fx-0377-root de chaque instance. Chaque copie ne réagit qu'aux frappes reçues quand elle a le focus (clic ou Tab). Sur la même page, deux zones fonctionnent de façon indépendante — seule la zone active se met à jour.keydown ne se déclenche pas pour un collé (Ctrl+V génère un keydown sur « v » mais pas sur chaque lettre du texte collé). Pour une dictée ou un collé, écoutez l'événement input sur un champ caché et lisez event.data pour obtenir les nouveaux caractères.
