Dot Matrix Printer
Un ticket de papier perforé dont les lignes s'impriment une à une, dans l'ordre, puis se réimpriment chaque fois que le ticket revient à l'écran.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
.dmp-paper dessine le papier : fond ivoire, bord gris, marge rouge à 20 px du bord gauche, et deux colonnes de 16 trous d'entraînement (.dmp-holes-l, .dmp-holes-r). Les lignes de texte, en Courier New 13 px, sont rangées dans .dmp-lines.
Chaque .dmp-line démarre invisible et suit l'animation dmpPrint (0,3 s) : elle apparaît en remontant de 4 px. Son départ vaut --dmp-start + rang × --dmp-gap, soit 0,5 s, 1,2 s, 1,9 s, 2,6 s, 3,3 s pour les cinq lignes fournies ; le rang est posé sur les huit premières lignes. L'ancienne version comptait les colonnes de trous parmi les lignes : les lignes 4 et 5 s'affichaient dès le chargement, avant les trois premières. C'est corrigé.
Un petit script observe chaque ticket avec un IntersectionObserver (seuil 30 %) : quand le ticket revient à l'écran, ses lignes sont remises à zéro et l'impression rejoue. Chaque copie de l'effet est suivie séparément ; le script n'ajoute rien à window et ne tourne pas en boucle.
Accessibilité
- Texte réel : toutes les lignes sont dans le HTML dès le départ ; un lecteur d'écran les lit sans attendre l'impression. Les trous, décoratifs, portent
aria-hidden="true". - Contraste : encre
#333sur papier ivoire, rapport d'environ 12:1. - Réduire les animations : sous
prefers-reduced-motion: reduce, le ticket s'affiche complet d'un coup ; le rejeu au retour à l'écran n'a plus d'effet visible. - Rien à manipuler : l'effet ne crée aucun élément focalisable. Le rejeu dépend du défilement, jamais d'un survol.
Compatibilité navigateur
CSS + 0,7 Ko de JavaScript, sans dépendance. La fonction la plus récente est IntersectionObserver (Chrome 51, Firefox 55, Safari 12.1 d'après les données MDN) ; sans elle, l'impression joue une fois au chargement. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : à 1 s seule la ligne 1 est visible, à 3,8 s les cinq lignes, dans l'ordre ; avec deux tickets, faire revenir le second ne relance que le second.
Sans JavaScript, l'impression joue une fois au chargement, même si le ticket est hors de l'écran. Sans animations CSS, les lignes resteraient invisibles : la règle de mouvement réduit les affiche ; pour un texte toujours visible, retirez l'animation de .dmp-line.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0278-root">
<div class="dmp-paper">
<div class="dmp-holes dmp-holes-l" aria-hidden="true">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="dmp-holes dmp-holes-r" aria-hidden="true">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="dmp-lines">
<div class="dmp-line">INVOICE #00142</div>
<div class="dmp-line">Date: 1989-03-15</div>
<div class="dmp-line">Item: Floppy Disk x10</div>
<div class="dmp-line">Total: $24.99</div>
<div class="dmp-line">*** THANK YOU ***</div>
</div>
</div>
</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 |
|---|---|---|
Lignes (HTML — <div class="dmp-line"> dans .dmp-lines) |
5 lignes | Jusqu'à 8 lignes s'enchaînent toutes seules ; au-delà, donnez le rang : style="--dmp-i: 8". Pour aligner des colonnes, ajoutez white-space: pre. |
Rythme (CSS — --dmp-start, --dmp-gap) |
0,5 s puis 0,7 s entre deux lignes | 0,1 s et 0,25 s pour un ticket de caisse rapide ; 1 s d'écart pour une imprimante lente et bruyante. |
Largeur (CSS — --dmp-w) |
280 px | 100% remplit le parent ; avec une hauteur fixée sur .dmp-paper, le papier couvre toute une zone. |
Papier et encre (CSS — --dmp-paper, --dmp-ink) |
ivory, #333 |
Papier vert d'imprimante #e8f3e3, encre violette #4c1d95 pour un tampon de caisse. |
Taille du texte (CSS — --dmp-size) |
13 px | 11 à 12 px dans un ticket étroit ; l'interligne reste au double de la taille. |
Rejeu au retour à l'écran (JS — seuil threshold) |
0.3 (30 % du ticket visible) |
0.6 attend que le ticket soit bien visible ; supprimez le script pour une impression unique au chargement. |
Cadre de démonstration (CSS — --dmp-page, --dmp-root-h) |
#0a0a0f, 300 px de haut au minimum |
transparent et 0 pour poser le ticket dans votre page. |
FAQ
display: none et affichez-le au moment voulu. Un élément qui devient visible rejoue ses animations CSS : les lignes s'impriment alors depuis la première..fx-0278-root a son propre observateur ; faire revenir un ticket à l'écran ne relance que lui. L'ancienne version ne suivait que le premier ticket de la page.
