Hello PMT
Nous sommes souvent confrontés à la question "comment on fait défiler du texte en html" J'ai vue qu'il y a deja un tuto la dessus mais je vais vous en donner un plus complet
Pour éviter de réexpliquer toujours la même chose, je vous ai préparé un petit tuto (en réalité, je reprends les expliations que je donne dans mes formations de codage)
Allez, on s'installe et on se concentre
Tout d'abord, en html, la balise qui permet de faire déplacer du texte de cette façon est la suivante :
Celle-ci possède de nombreuses propriétés que nous allons voir ensemble 
1) Le sens du déplacement
On peut choisir dans quel sens nous voulons que notre texte aille.
* Vers la droite :
* Vers la gauche :
* Vers le haut :
* Vers le bas :
2) La vitesse du déplacement
Après avoir choisi la direction dans laquelle tu veux que ton texte aille, on peut choisir sa vitesse. Pour cela, nous allons utilisé l'attribut "scrollamount". Plus vous irez vers 0, plus le texte défilera lentement. En revanche, plus vous vous éloignerez de 0, plus il ira vite.
>> Exemple :
* Texte qui défile doucement :
* Texte qui défile normalement :
* Texte qui défile très vite :
3) Le type du déplacement
Nous avons donc vu leur direction, leur vitesse. Voyons maintenant leur comportement. Ils sont de 3 types :
>> Behavior="scroll" : là, le texte défile normalement.
>> Behavior="slide" : là, le texte glisse jusqu'à la direction indiquée et s'arrête
>> Behavior="alternate" : le texte fait un vas et vient
4) La mise en page du déplacement
Le marquee se comporte également comme une div. On peut donc lui ajouter du style et toutes les propriétés dont on a envie (une couleur de fond, des bordures, la couleur du texte, etc.)
Par exemple : http://gyazo.com/d596ad337550206a5b41d11b7d5542d1
Et un petit ajout pour arrêter le défilement au passage de la souris. On va utiliser 2 fonctions javascript :
Qu'on va appliquer sur 2 attributs :
Pour arrêter le défilement :
Si on décode :
-> quand la souris passe dessus (over), l'élement qu'elle survole (this) s'arrête.
2/ Pour reprendre le défilement :
-> quand la souris s'en va (out), l'élement sur lequel elle était (this) reprend.
Et dans le code ça se présente comme ça :
Nous sommes souvent confrontés à la question "comment on fait défiler du texte en html" J'ai vue qu'il y a deja un tuto la dessus mais je vais vous en donner un plus complet
Pour éviter de réexpliquer toujours la même chose, je vous ai préparé un petit tuto (en réalité, je reprends les expliations que je donne dans mes formations de codage)
Allez, on s'installe et on se concentre
Tout d'abord, en html, la balise qui permet de faire déplacer du texte de cette façon est la suivante :
HTML :
<marquee>texte</marquee>1) Le sens du déplacement
On peut choisir dans quel sens nous voulons que notre texte aille.
* Vers la droite :
HTML :
<marquee direction="right">Mon texte va vers la droite</marquee>* Vers la gauche :
HTML :
<marquee direction="left">Mon texte va vers la gauche</marquee>* Vers le haut :
HTML :
<marquee direction="up">Mon texte va vers le haut</marquee>* Vers le bas :
HTML :
<marquee direction="down">Mon texte va vers le bas</marquee>2) La vitesse du déplacement
Après avoir choisi la direction dans laquelle tu veux que ton texte aille, on peut choisir sa vitesse. Pour cela, nous allons utilisé l'attribut "scrollamount". Plus vous irez vers 0, plus le texte défilera lentement. En revanche, plus vous vous éloignerez de 0, plus il ira vite.
>> Exemple :
* Texte qui défile doucement :
HTML :
<marquee direction="left" scrollamount="2">Mon texte défile doucement</marquee* Texte qui défile normalement :
HTML :
<marquee direction="left" scrollamount="10">Mon texte se déplace normalement</marquee>* Texte qui défile très vite :
HTML :
<marquee direction="left" scrollamount="50">Mon texte se déplace très vite</marquee>3) Le type du déplacement
Nous avons donc vu leur direction, leur vitesse. Voyons maintenant leur comportement. Ils sont de 3 types :
>> Behavior="scroll" : là, le texte défile normalement.
HTML :
<marquee direction="left" behavior="scroll">Mon texte</marquee>>> Behavior="slide" : là, le texte glisse jusqu'à la direction indiquée et s'arrête
HTML :
marquee direction="left" behavior="slide">Mon texte</marquee>>> Behavior="alternate" : le texte fait un vas et vient
HTML :
<marquee direction="left" behavior="alternate">Mon texte</marquee>4) La mise en page du déplacement
Le marquee se comporte également comme une div. On peut donc lui ajouter du style et toutes les propriétés dont on a envie (une couleur de fond, des bordures, la couleur du texte, etc.)
Par exemple : http://gyazo.com/d596ad337550206a5b41d11b7d5542d1
HTML :
<marquee style="background-color:#e26e26; border:dashed 1px brown; font-weight:bold; font-variant: small-caps; color:#000000; height:200px; width:400px; text-align:center;margin:auto;" direction="up" scrollamount="6">Mon texte qui défile</marquee>Et un petit ajout pour arrêter le défilement au passage de la souris. On va utiliser 2 fonctions javascript :
HTML :
stop();
start();Qu'on va appliquer sur 2 attributs :
HTML :
onMouseOver
onMouseOutPour arrêter le défilement :
HTML :
onMouseOver="this.stop();"Si on décode :
-> quand la souris passe dessus (over), l'élement qu'elle survole (this) s'arrête.
2/ Pour reprendre le défilement :
HTML :
onMouseOut="this.start();"-> quand la souris s'en va (out), l'élement sur lequel elle était (this) reprend.
Et dans le code ça se présente comme ça :
HTML :
<marquee direction="left" scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();">Mon texte défile</marquee>Et voilà, vous savez à présent tout ce qu'il faut pour faire défiler vos textes en html
