• !!! Les choses à savoir !!!

    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 ?

    Merci d'avoir pris la peine de lire

    1. Je tien à rajouter que celui-ci vien de "http://www.school-of-progress.fr/t3883-html-balise-marquee-pour-faire-defiler-du-texte" Merci à Miettes pour avoir bien détaillé

  • Commentaires

    1
    Dimanche 28 Août 2016 à 16:42

    Wesh, merci pour les articles, sa ma intéressée

    2
    Dimanche 28 Août 2016 à 16:52

    Eh eh, Salut Daxo merci d'être passé, je commencé à me dire qu'il y'a personne qui passe par là après il y'a pas encore beaucoup d'articles, mais au furent est à mesure t'inquiète ça va venir! Après tu peut me dire des idées,qui t'intéresse est je ferai de mon possible pour le faire.

    Il y'a un autre 'article' qui parle de httlm codage ect. Tu peut éventuellement le lire si, tu es intéressé par l'informatique... 

    Mais, ne t'inquiète pas tous sa, n'est que le début hein ? Bref je te laisse sur ces derniers mots

    Bon continuations #Staffing

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :