Header

Partagez | 

[HTML] Balise marquee pour faire défiler du texte

Message Sujet: [HTML] Balise marquee pour faire défiler du texte   Lun 4 Oct - 12:18

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Hello hello Smile

Nous sommes souvent confrontés à la question "comment on fait défiler du texte en html" ? 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) Smile

Allez, on s'installe et on se concentre Wink




Tout d'abord, en html, la balise qui permet de faire déplacer du texte de cette façon est la suivante :

Code:
<marquee>texte</marquee>

Celle-ci possède de nombreuses propriétés que nous allons voir ensemble ^^

Le sens du déplacement



On peut choisir dans quel sens nous voulons que notre texte aille.

* Vers la droite :

Mon texte va vers la droite

Code:
<marquee direction="right">Mon texte va vers la droite</marquee>

* Vers la gauche :

Mon texte va vers la gauche

Code:
<marquee direction="left">Mon texte va vers la gauche</marquee>

* Vers le haut :

Mon texte va vers le haut

Code:
<marquee direction="up">Mon texte va vers le haut</marquee>

* Vers le bas :

Mon texte va vers le bas

Code:
<marquee direction="down">Mon texte va vers le bas</marquee>

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 :

Mon texte défile doucement

Code:
<marquee direction="left" scrollamount="2">Mon texte défile doucement</marquee

Mon texte se déplace normalement

Code:
<marquee direction="left" scrollamount="10">Mon texte se déplace normalement</marquee>

Mon texte se déplace très vite

Code:
<marquee direction="left" scrollamount="50">Mon texte se déplace très vite</marquee>

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.

Mon texte

Code:
<marquee direction="left" behavior="scroll">Mon texte</marquee>

>> Behavior="slide" : là, le texte glisse jusqu'à la direction indiquée et s'arrête

Mon texte

Code:
<marquee direction="left" behavior="slide">Mon texte</marquee>

>> Behavior="alternate" : le texte fait un va et vient Smile .

Mon texte

Code:
<marquee direction="left" behavior="alternate">Mon texte</marquee>

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 :

Mon texte qui défile

Code:
<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 voilà, vous savez à présent tout ce qu'il faut pour faire défiler vos textes en html Wink




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas


Message Sujet: Re: [HTML] Balise marquee pour faire défiler du texte   Ven 15 Avr - 15:46

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Et un petit ajout pour arrêter le défilement au passage de la souris. On va utiliser 2 fonctions javascript :

Code:
stop();

start();

qu'on va appliquer sur 2 attributs :

Code:
onMouseOver

onMouseOut

1/ Pour arrêter le défilement :

Code:
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

Code:
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 :

Code:
<marquee direction="left" scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();">Mon texte défile</marquee>
Revenir en haut Aller en bas


[HTML] Balise marquee pour faire défiler du texte
Page 1 sur 1
 Sujets similaires
-
» Code pour faire un "fond de texte" en page d'accueil
» Faire défiler plusieurs images pour la banière
» Pour faire en sorte que tous mes membres voient le html
» Besoin d'aide pour faire un modèle de fiche de présentation [HTML]
» HTML pour faire l'accueil du forum
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens