Exercices Bannière défilante

Exercice - Bannière défilante

Du point de vue sémantique, faire défiler un texte dans un cadre relève de la présentation (texte dans un cadre) et du comportement (qui défile). Le CSS gère la présentation et le JavaScript le comportement.

Note: L'utilisation de la balise marquee de Microsoft (inexistante dans le W3C) est à proscrire.

Organisons tout d'abord notre contenu: il nous faut un paragraphe et une boite pour faire office de fenêtre, on obtient donc simplement:

<div id="banniere">
   <p>Remplissez ce formulaire en vérifiant la bonne saisie de tous les champs</p>
</div>

Note: On pourrait aussi créer ces noeuds HTML en JavaScript à l'aide de la fonction document.createElement().

Un peu de CSS pour mettre en forme tout ceci et faire disparaître la partie non-visible du texte de la bannière:

#banniere{
    /*couleurs et dimensions de la fenêtre*/
    border: 1px inset #000;
    background: #444;
    color: #ddd;
    width: 200px;
    height: 2em;
    /* masquer ce qui dépasse */
    overflow: hidden;
}

#banniere p{
    /* centrer le texte */
    margin: 0.5em 0 0 0;
    /* tout afficher sur une seule ligne */
    white-space: nowrap;
}

Il ne nous reste plus qu'a faire défiler le p vers la gauche et à prévoir son retour à la fin. A l'intérieur de la fonction callback de l'événement load, récupérons l'objet texte et sa taille:

    let banniere = document.getElementById('banniere');
    let texte = banniere.firstElementChild;
    let tailleTexte = banniere.scrollWidth;

Créons ensuite la fonction qui déplace le texte de 10 pixels vers la gauche. Cette fonction modifie la propriété CSS margin-left du texte en enlevant au préalable les unités de cette dernière. Nous utilisons ensuite la fonction setTimeout pour rappeler cette même fonction après 100 millisecondes.

function defile(){
     let pos = texte.style.marginLeft.replace('px','');
     pos -= 10;
     texte.style.marginLeft = pos+"px";
     setTimeout(defile, 100);
}

Il ne nous reste plus qu'a ramener le texte à droite de la bannière une fois le défilement terminé :

function defile(){
     // ...
     if(pos < -tailleTexte){
          pos = 200;
     }
     //...
}

Et bien entendu à appeler la fonction defile() une première fois (la définition de la fonction peut être écrite après son appel) :

   // ....
   defile();
   // ....

• Ajoutez avant votre formulaire une bannière défilante expliquant la marche à suivre.
• Vous pouvez également ajouter un contrôle HTML pour modifier la vitesse de la bannière.
• Bonus: remplacer setTimeout par requestAnimationFrame