Bonjour! Nous voici réunis pour un nouveau tuto sur le défilement! Vous voyez la barre des partenaires sur la page d'accueil? Et bien je vais vous apprendre à le faire^^
Voici la balise BBCode qui permet de faire cela^^
- Code:
-
C'est [scroll] et [/scroll]
Jusque là rien de compliqué. Mais vous voulez savoir comment faire un défilement de haut en bas?
Voilà pour vous:
- Code:
-
C'est [updown] et [/updown]
Voilà! Mais je vois l'interrogation dans vos regards... Vous vous demandez pourquoi on aurait besoin du HTML alors que le BBCode est parfait?
Je vais vous expliquer^^
Le défilement avec le HTML permet de modifier la vitesse et la mise en forme du défilement.
Regardez ce que l'on peut faire avec du HTML:
Et voilà ce que ça donne en BBCode:
Voici le code du premier défilement:
- Code:
-
<marquee scrollamount="1">C'est très lent!</marquee>
Vous venez donc d'apprendre 2 balise en 1 code:
-marquee (permet de commencer ou terminer le défilement)
-scrollamount (permet de modifier la vitesse)
Nous allons en apprendre d'autres ne vous inquiétez pas^^
Il y a aussi:
bgcolor="nom de la couleur en anglais" (permet de modifier la couleur de l'encadré du défilement)
behavior="nom du défilement" (permet de modifier la mise en forme du défilement)
Les noms du défilement: (ils sont à mettre dans la balise behavior)
scroll (défilement normal)
slide (défilement en glissade)
alternate (défilement en va et viens)
Voici le défilement normal:
- Code:
-
<marquee behavior="scroll" bgcolor="silver">Défilement normal</marquee>
Voici le défilement en glissade:
- Code:
-
<marquee behavior="slide" bgcolor="silver">Défilement en glissade</marquee>
Voici le défilement en va et viens:
- Code:
-
<marquee behavior="alternate" bgcolor="silver">Défilement en va et viens</marquee>
Maintenant, nous allons étudier les "directions" que peuvent prendre les texte en défilement:
Voici maintenant les codes pour ces 4 défilements:
- Code:
-
<marquee direction="left">Défilement vers la gauche</marquee>
- Code:
-
<marquee direction="right">Défilement vers la droite</marquee>
- Code:
-
<marquee direction="up">Défilement vers le haut</marquee>
- Code:
-
<marquee direction="down">Défilement vers le bas</marquee>
Vous l'avez vu la balise est "direction" et les composants sont "left", "right", "up" ou "down"!
Maintenant nous allons voir la balise "scrolldelay" et ses composants. Cette balise veut dire l'intervalle entre les déplacements. Voyez plutôt un intervalle long:
- Code:
-
<marquee scrolldelay="500">Intervalle long entre les déplacements!</marquee>
Maintenant nous allons apprendre très très compliqué! L'arrêt du défilement avec le passage de la souris!
Donc voici un défilement:
Voici le code de ce défilement:
- Code:
-
<marquee scrollamount="3" id="id1"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">Mettez votre souris sur le texte et vous verrez!</span></marquee>
On va commencer par le id="id1" . Vous êtes obligés de le mettre sans quoi votre défilement ne s'arrêtera pas.
Ensuite, nous allons nous appliquer sur: onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();
Je pense que vous devrez tout le temps copier ce code car c'est impossible de l'apprendre par coeur
Bon voilà^^
Je rajoute un truc: Si vous avez deux textes en défilement avec arrêt par la souris, un texte doit être rempli avec id1 et l'autre avec id2 sans quoi un seul des deux textes s'arrêtera.
Voilà, j'ai terminé ce tuto! En espérant qu'il vous servira
PS: Le code avec "onmouseover" ne marche pas sur le forum mais peut marcher sur la PA