Bandeau défilant

Bandeau horizontal à défilement continu pour annonces, actualités ou alertes. Bouton de pause obligatoire pour l’accessibilité (WCAG 2.2.2). Respecte prefers-reduced-motion.

Exemple

Ouverture du guichet unique le 1er avril 2025 Journée nationale de l’administration : 15 avril Nouveau portail e-services disponible

<div class="bj-marquee bj-marquee--bordered" data-bj-marquee>
  <div class="bj-marquee__track">
    <span class="bj-marquee__item">Annonce 1</span>
    <span class="bj-marquee__item">Annonce 2</span>
  </div>
  <button class="bj-marquee__pause" type="button">
    <i class="ri-pause-line"></i>
  </button>
</div>

Combinaisons vitesse, sens, bordures, pause

Combinez les modificateurs sur le même conteneur. La durée par défaut est pilotée par la variable CSS --bj-marquee-duration (20s) ; les classes lente / rapide la redéfinissent.

Rapide + sens inverse

Sens inverse — démonstrationVitesse rapide (10s)

<div class="bj-marquee bj-marquee--fast bj-marquee--reverse" data-bj-marquee>…</div>

Lent + inverse + bordures

Annonce institutionnelle lisible avec cadre haut/bas.

Service public — horaires d’été Contact citoyen

<div class="bj-marquee bj-marquee--slow bj-marquee--reverse bj-marquee--bordered" data-bj-marquee>…</div>

Rapide + bordures

Bandeau urgent encadré, toujours avec bouton de pause.

Alerte technique — maintenance ce soirSuivez le statut sur le portail

<div class="bj-marquee bj-marquee--fast bj-marquee--bordered" data-bj-marquee>…</div>

État figé (pausable)

Classe bj-marquee--paused fige l’animation (posée par le script au clic ou pour une capture). Le bouton bj-marquee__pause reste obligatoire pour la reprise.

Texte figé pour accessibilité ou captureDeuxième segment (non animé ici)

<div class="bj-marquee bj-marquee--paused" data-bj-marquee>
  <div class="bj-marquee__track">…</div>
  <button class="bj-marquee__pause" type="button" aria-label="Pause">…</button>
</div>

Lent (vitesse seule)

Cycle long (35s) pour lectures détailléesTexte d’exemple

<div class="bj-marquee bj-marquee--slow" data-bj-marquee>…</div>

Classes CSS

Classe	Description
`bj-marquee`	Conteneur principal.
`data-bj-marquee`	Initialisation du script sur le conteneur.
`bj-marquee__track`	Piste animée.
`bj-marquee__item`	Élément individuel.
`bj-marquee__pause`	Bouton pause/reprise (obligatoire).
`bj-marquee--reverse`	Défilement en sens inverse.
`bj-marquee--slow`	Vitesse lente (35s).
`bj-marquee--fast`	Vitesse rapide (10s).
`bj-marquee--bordered`	Bordures haut/bas.
`bj-marquee--paused`	État pause (classe posée par le script ou à la main pour figer le défilement).
`--bj-marquee-duration`	Durée d’un cycle ; surchargée par bj-marquee--slow (35s) et bj-marquee--fast (10s).

Bandeau défilant

Exemple

Combinaisons vitesse, sens, bordures, pause

Classes CSS

Accessibilité