Alternating Rows
Plusieurs rangées de mots superposées qui glissent en sens contraires, une sur deux vers la droite, avec un seul bouton Pause pour tout le bloc.
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
Chaque .almq-row est une bande complète : sa fenêtre, sa piste et sa liste, écrite une fois. Par défaut les rangées impaires partent vers la gauche et les paires vers la droite, à 50 px par seconde ; data-direction="left" ou "right" sur une rangée impose son sens, data-speed sur une rangée lui donne sa propre vitesse (une rangée lente, une rapide : c'était un autre effet du catalogue, c'est ici un simple attribut).
Le script traite les rangées une par une : il mesure la liste de chacune, ajoute ses doubles, puis règle sa durée pour que la vitesse en pixels par seconde soit tenue. Deux rangées de longueurs différentes avancent donc au même rythme, sans qu'aucune ne laisse de vide, même à 1 900 px de large où l'ancienne version se trouait au-delà de 600 px.
Le bloc .almq-rows réagit d'un seul tenant : la souris posée n'importe où arrête toutes les rangées, le bouton Pause aussi. Les couleurs viennent de --almq-color-1 à --almq-color-3 et se répètent toutes les trois rangées.
Accessibilité
- Bouton Pause unique : un seul
<button>àaria-pressedpour toutes les rangées, atteignable au Tab ; le survol du bloc arrête aussi tout (WCAG 2.2.2). - Une lecture par rangée : chaque rangée est une liste lue une fois ; ses doubles portent
aria-hidden="true". Avant réparation, les trois rangées étaient lues deux fois chacune. - Sens des rangées : le sens est décoratif et n'est pas annoncé ; si le sens porte une information (aller et retour, par exemple), écrivez-la aussi en texte à côté des rangées.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, toutes les rangées s'immobilisent, sans doubles ni bouton, et chacune se fait défiler à la main ; une rangée qui dépasse reçoit aussi le focus au clavier (Tab) et se fait défiler aux flèches. - Liens : un lien de rangée qui reçoit le focus clavier immobilise tout le bloc, ramène les rangées à leur départ et fait glisser la sienne jusqu'à lui.
Compatibilité navigateur
Une animation CSS par rangée, sens inversé par animation-direction, 4,5 Ko de JavaScript commenté, aucune dépendance. ResizeObserver : Chrome 64, Firefox 69, Safari 13.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : trois rangées pleines à 390, 800 et 1 900 px, survol et bouton qui arrêtent les trois, deux blocs indépendants, 0 erreur.
Sans JavaScript, les rangées restent immobiles, chacune défilable à la main. Sans ResizeObserver, les doubles ne sont recomptés qu'au redimensionnement de la fenêtre.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0194-root" data-speed="50">
<div class="almq-band">
<div class="almq-rows">
<div class="almq-row">
<div class="almq-viewport">
<div class="almq-track">
<ul class="almq-group" role="list">
<li>Premier mot</li>
<li>Deuxième mot</li>
</ul>
</div>
</div>
</div>
<div class="almq-row">
<div class="almq-viewport">
<div class="almq-track">
<ul class="almq-group" role="list">
<li>Autre rangée</li>
<li>Sens inverse</li>
</ul>
</div>
</div>
</div>
</div>
<button type="button" class="almq-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 |
|---|---|---|
Rangées (HTML — les .almq-row) |
3 rangées | Autant de rangées que voulu ; chacune a sa propre liste, écrite une fois. |
data-speed (racine ou rangée) |
50 | Pixels par seconde ; sur une rangée, il remplace celui de la racine. |
data-direction (sur une rangée) |
alterné | left ou right impose le sens de la rangée. |
--almq-color-1, -2, -3 |
#6366f1, #d946ef, #22d3ee | Couleur de chaque rangée, répétée toutes les trois rangées. |
--almq-size / --almq-space |
1.25rem / 4rem | Taille du texte et écart entre deux éléments d'une rangée. |
--almq-height / --almq-bg / --almq-padding |
180px / #0a0a0f / 1rem 0 | Cadre de démonstration ; auto, transparent, 0 pour le poser dans une carte. |
--almq-button / --almq-button-size |
rgba(255, 255, 255, .8) / 2rem | Couleur et taille du bouton qui arrête tout le bloc. |
FAQ
.fx-0194-root d'une rangée chacune, l'une sous l'autre.data-speed sur la rangée : <div class="almq-row" data-speed="120"> file à 120 px/s pendant que les autres gardent la vitesse de la racine.
