[CSS]Texte défilant avec départ à droite

Objectif

Faire défiler un texte à la manière de la balise <marquee>, de droite vers la gauche, avec départ du texte à droite de la fenêtre de défilement.

Exemple 1

Avec un texte plus long que la largeur de la fenêtre de défilement.

Exemple 2

Avec un texte moins long que la largeur de la fenêtre de défilement.

Structure HTML

La structure HTML mise en œuvre est constituée de deux blocs, un bloc conteneur et un bloc défilant.

<!-- le conteneur fenêtre -->
<div class="marquee-rtl">
    <!-- le contenu défilant -->
    <div>Le message que l'on veut voir défilé horizontalement...</div>
</div>

Application du CSS

Bloc conteneur

Rien de bien compliqué pour le CSS du conteneur.

/* le block conteneur */
.marquee-rtl {
  max-width: 30em;                      /* largeur de la fenêtre */
  margin: 1em auto 2em;
  border: 10px solid #F0F0FF;
  overflow: hidden;                     /* masque tout ce qui dépasse */
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}

Bloc défilant

Le bloc défilant doit être un modèle de boîte en ligne n'autorisant pas le renvoi à la ligne et être placé à droite du conteneur.

L'animation proprement dite est définie en utilisant la propriété animation.

/* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

La propriété animation se décompose comme suit :

  animation-name: defilement-rtl;       /* référence à la règle @keyframes mise en oeuvre */
  animation-duration: 15s;              /* valeur à ajuster suivant la longueur du message */
  animation-iteration-count: infinite;  /* boucle continue */
  animation-timing-function: linear;    /* pas vraiment utile ici */
}

Règle @keyframes

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

Les valeurs exprimées en pourcentage sont relatives aux dimensions de l'élément auquel elles s'appliquent et non au parent comme cela pourrait être le cas pour la propriété padding-left.

Ressources

• CSS Animations
• La propriété animation
• La règle @keyframes