AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Principe de défilement (Marquee)

    Partagez
    avatar
    Lucky Numb£r
    MasculinAge : 24Messages : 1972

    le Mer 21 Avr 2010 - 1:54



    Hello c'est encore moi x)

    Édit Responsable (Onyx) : La balise marquee est une balise dépréciée, donc il est mieux d'utiliser des animations keyframes ou d'autres méthodes afin d'obtenir le défilement. Néanmoins, puisque la balise est encore utilisée à certains endroits, voilà encore le tuto.

    Maintenant je vais vous donner le secret des marquee ! Vous en rêviez, bien le voilà *.*

    Voilà la balise marquee toute seule donne ceci:
    c'est bidon
    Code:
    <marquee>c'est bidon</marquee>




    On peut ensuite utiliser le "behavior" pour lui indiquer comment se comporter.

    Voilà le behavior "slide" où le texte/image part d'un bord, va jusqu'à l'autre bord et s'arrête :
    YEAH !
    Code:
    <marquee behavior="slide"> YEAH ! </marquee>




    Voilà le behavior "scroll" où le texte/image part d'un bord, va jusqu'à l'autre bord, y disparait et recommence :
    YEAH !
    Code:
    <marquee behavior="scroll"> YEAH ! </marquee>




    Voilà le behavior "alternate" où le texte/image part d'un bord, va jusqu'à l'autre bord et rebondi :
    YEAH !
    Code:
    <marquee behavior="alternate"> YEAH ! </marquee>





    Ajoutez à cela le fait que vous pouvez donner une "direction" au défilement (down, right, left, up);
    Ainsi que le "scrollamount" permettant d'accélérer (quand on augmente le nombre) ou de ralentir (quand on diminue le nombre) la vitesse de défilement.
    De cette manière on peut obtenir une balise complète du style.

    Exemple complet :
    YEAH !
    Code:
    <marquee behavior="alternate" direction="right" scrollamount="50"> YEAH ! </marquee>




    Afin que le mouvement s'arrête lorsqu'on survole la balise, on peut utilise le "onmouseover" et "onmouseout" comme cela :
    Code:
    <marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="alternate" direction="right" scrollamount="50">blablabla je suis trop fort, blablabla</marquee>

    À noter que le onmouseover et le onmouseout ne fonctionne pas dans les messages.




    C'est tout pour le moment, le reste nous vous laisserons le découvrir de vous-même ^^

    Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^



    avatar
    CN.June
    FémininAge : 54Messages : 314

    le Dim 25 Mar 2012 - 20:15

    J'aime beaucoup l'effet du dernier Marquee ! En tout cas, merci pour ce tuto très plaisant :'DD
    avatar
    Hayate747
    MasculinAge : 27Messages : 194

    le Dim 7 Oct 2012 - 15:57

    Merci ! :)
    avatar
    Sakira
    FémininAge : 24Messages : 89

    le Mar 1 Jan 2013 - 22:33

    Merci XD



    Bientôt peut être o/
    Dépendra de ma motiv'
    avatar
    Jynnea
    FémininAge : 22Messages : 101

    le Jeu 8 Déc 2016 - 22:12

    Merci!
    avatar
    Onyx
    FémininAge : 23Messages : 2970

    le Mer 5 Avr 2017 - 17:53

    Je déplace vers les tutoriels ^^



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Sep 2017 - 17:24