Vertical Marquee
Une colonne de lignes qui monte doucement dans une fenêtre de hauteur fixe, en boucle continue, avec arrêt au survol et bouton Pause.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La fenêtre .vtmq-viewport mesure 120 px de haut (--vtmq-window) et cache ce qui dépasse. Dedans, la liste .vtmq-group contient vos lignes, écrites une fois. Le script compare la hauteur de la liste à celle de la fenêtre et empile sous elle le nombre de doubles nécessaire pour que la fenêtre soit toujours pleine, même avec trois lignes seulement ou une fenêtre agrandie à 400 px.
La piste monte d'une hauteur de liste, puis l'animation vtmq-scroll recommence : la ligne qui réapparaît en bas est un double, à la même place que l'original, d'où une boucle sans à-coup. La vitesse se règle en pixels par seconde dans data-speed (20 par défaut, soit une ligne de 39 px toutes les 2 secondes) ; data-direction="down" fait descendre la colonne.
Les lignes sont centrées (--vtmq-align accepte aussi left et right) ; l'ancienne version les collait au bord gauche de la zone. Si la hauteur des lignes change (police chargée tard, texte qui passe sur deux lignes dans une colonne étroite), un ResizeObserver refait le calcul ; si un script modifie la liste, les doubles sont reconstruits.
Accessibilité
- Arrêt : la colonne s'immobilise tant que la souris est dessus, et le bouton rond Pause (
aria-pressed) la fige jusqu'au clic suivant. C'est ce que demande WCAG 2.2.2 pour un mouvement automatique de plus de 5 secondes. - Lecture vocale : les doubles sont marqués
aria-hidden="true"; un lecteur d'écran annonce la liste de lignes une seule fois, comme une liste ordinaire (avant réparation : deux fois). - Clavier : un lien placé dans une ligne reçoit le focus dans la liste d'origine uniquement ; la colonne revient alors à sa position de départ, s'arrête et fait monter ou descendre la fenêtre jusqu'au lien. Elle repart quand le focus en sort.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la colonne ne bouge plus seule, ne montre que la liste d'origine et devient une petite zone que l'on fait défiler au doigt ou à la molette ; quand la liste dépasse, la fenêtre reçoit aussi le focus au clavier (Tab) et se fait défiler aux flèches. - Contraste : le cyan #22d3ee sur #0a0a0f atteint 10,9:1.
Compatibilité navigateur
Animation CSS verticale (translateY vers une variable), 4,5 Ko de JavaScript commenté, aucune dépendance. ResizeObserver : Chrome 64, Firefox 69, Safari 13.1 ; prefers-reduced-motion : Chrome 74, Firefox 63, Safari 10.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : fenêtre toujours pleine, survol et bouton qui arrêtent la colonne, deux colonnes indépendantes dans la même page, 0 erreur.
Sans JavaScript, la fenêtre affiche la liste immobile et se fait défiler à la main. Dans Safari avant 13.1 (pas de ResizeObserver), le nombre de doubles n'est recalculé qu'au redimensionnement de la fenêtre du navigateur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0189-root" data-speed="20" data-direction="up">
<div class="vtmq-band">
<div class="vtmq-viewport">
<div class="vtmq-track">
<ul class="vtmq-group" role="list">
<li>Première ligne</li>
<li>Deuxième ligne</li>
</ul>
</div>
</div>
<button type="button" class="vtmq-toggle" aria-pressed="false" aria-label="Pause"></button>
</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 — les <li> de .vtmq-group) |
4 lignes | Texte, liens, pastilles ou petites images, écrits une fois. Les doubles sont fabriqués par le script. |
data-speed |
20 | Pixels par seconde. Entre 12 et 25 pour qu'une ligne se lise avant de sortir. |
data-direction |
up | down : la colonne descend. |
--vtmq-window |
120px | Hauteur de la fenêtre visible. |
--vtmq-align |
center | Alignement des lignes : left, center ou right. |
--vtmq-color / --vtmq-size / --vtmq-space |
#22d3ee / 1.25rem / 1rem | Couleur, taille du texte et espace entre deux lignes (identique au raccord). |
--vtmq-height / --vtmq-bg / --vtmq-padding |
180px / #0a0a0f / 1rem 0 | Cadre de démonstration ; auto, transparent et 0 pour l'intégrer à une carte. |
--vtmq-button / --vtmq-button-size |
rgba(255, 255, 255, .8) / 2rem | Couleur et taille du bouton Pause. |
FAQ
@keyframes à étapes écrits pour un nombre de lignes fixe.aria-pressed). Seul l'arrêt au survol cesse quand la souris s'en va.
