VHS Tracking
Des lignes de texte en Courier qui décrochent à l'horizontale avec une frange rouge et cyan, sous une trame de balayage et une ligne claire qui descend : l'image d'une cassette VHS mal calée.
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
La racine contient un écran .vht-screen (280 px de large, fond #111, coins arrondis) fait de trois couches : le texte .vht-text, une trame .vht-noise de lignes blanches à 2 % toutes les 6 px, et une ligne claire .vht-line de 3 px. Les deux couches décoratives portent aria-hidden="true". Chaque <span> de .vht-text forme une ligne : PLAY, SP 00:12:34 et REC par défaut.
Chaque ligne joue vhtTracking sur 3 s. Pendant les 1,35 premières secondes (45 % du cycle), elle glisse à 8 px à droite (atteints à 0,45 s), repart à 4 px à gauche (à 0,9 s) puis se recale, pendant que son ombre rouge et cyan change de côté ; les 1,65 s restantes, elle tient en place avec une frange de 1 à 2 px. La 2ᵉ ligne démarre 0,5 s après la 1ʳᵉ, la 3ᵉ 1 s après : le décrochage descend l'écran. En même temps, vhtLine fait glisser la ligne claire de haut en bas en 4 s.
Largeur de l'écran (--vht-width), taille et couleur du texte, couleurs des franges, amplitude du saut (--vht-jump), durée du cycle et fond de l'écran sont des variables posées sur la racine. L'écran ne dépasse jamais son conteneur (max-width: 100%) ; avec --vht-width: 100% et --vht-panel: transparent, il se pose sur une image ou une vidéo.
Aucun JavaScript. Au-delà de trois lignes, les suivantes partent en même temps que la première : ajoutez une règle .vht-text span:nth-child(4) { animation-delay: 1.5s } pour prolonger l'escalier.
Accessibilité
- Lecteurs d'écran : le texte est réel et lu dans l'ordre (« PLAY SP 00:12:34 REC ») ; la trame et la ligne claire, masquées par
aria-hidden, ne sont pas annoncées. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les lignes s'arrêtent avec leur frange de 2 px, la trame reste et la ligne claire est retirée. Avant réparation, les quatre animations continuaient. - Clignotement : la ligne claire est à 15 % d'opacité et le décrochage n'occupe que 1,35 s de chaque cycle de 3 s ; mesure image par image, aucune case ne dépasse 3 changements par seconde.
- Contraste : texte blanc sur
#111par défaut. Posé sur une vidéo avec--vht-panel: transparent, vérifiez que l'image derrière reste assez sombre, ou gardez un fond semi-opaque (rgba(0,0,0,.35)). - Sémantique : PLAY ou REC sont des libellés, pas des commandes ; dans un vrai lecteur, les commandes restent de vrais
<button>placés hors de l'effet.
Compatibilité navigateur
CSS seul (2,9 Ko), aucune dépendance : variables CSS dans les images clés (transform, text-shadow), dégradé répété pour la trame, animation de top pour la ligne claire. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même rendu que l'ancienne version une fois les lignes lancées (seule différence : les lignes 2 et 3 ont déjà leur frange pendant leur délai de départ), deux copies indépendantes, 390 px sans débordement, 0 erreur.
Sans animations CSS, l'écran reste figé : texte avec sa frange, trame visible, ligne claire cachée au-dessus du bord. Sans variables CSS, les couleurs et la largeur réglables ne s'appliquent plus et le texte prend le style de la page.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0272-root">
<div class="vht-screen">
<div class="vht-text">
<span>PLAY</span>
<span>SP 00:12:34</span>
<span>REC</span>
</div>
<div class="vht-noise" aria-hidden="true"></div>
<div class="vht-line" aria-hidden="true"></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 — un <span> par ligne dans .vht-text) |
PLAY · SP 00:12:34 · REC | Une à trois lignes reçoivent chacune leur décalage ; une seule ligne suffit pour un horodatage. |
--vht-width |
280px | Largeur de l'écran ; 100% pour couvrir une image, auto pour épouser le texte. |
--vht-size · --vht-color |
18px · #fff | Taille et couleur du texte. |
--vht-red · --vht-cyan |
red · #0ff | Couleurs des deux franges qui encadrent les lettres. |
--vht-jump |
8px | Plus grand saut à droite ; le retour à gauche vaut la moitié. 4 à 5 px pour un petit texte. |
--vht-speed |
3s | Durée d'un cycle de décrochage ; 6s rend l'incident plus rare. |
--vht-panel |
#111 | Fond de l'écran ; transparent ou semi-opaque pour une surimpression. |
--vht-bg · --vht-height |
#0a0a0f · 300px | Fond et hauteur minimale de la racine ; transparent et auto pour l'intégrer. |
FAQ
position: absolute; inset: 0 dans le conteneur de la <video>, avec --vht-width: 100%, --vht-height: 100% et --vht-panel: transparent. Ajoutez pointer-events: none à la racine pour que les clics atteignent les commandes de la vidéo.--vht-panel) autour du texte, comme l'horodatage des exemples.
