Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

18 février 2009 3 18 /02 /février /2009 17:10
Voici un petit code facile à utiliser dans vos articles ou dans vos modules qui permet de faire des petites effets d'animations.

Attention, ce code ne s'utilise pas dans le CSS, mais dans le HTML. Il n'est donc pas à placer dans le design de votre blog mais dans le corps d'un article ou d'un module.



Dans votre fenêtre de publication, si vous n'y êtes pas déjà, passez en mode "édition avancée" pour avoir l'option HTML disponible, puis cliquez sur HTML.
<marquee behavior=scroll direction="left">Votre message ici</marquee>

Votre message ici


Ou vers la droite :
<marquee behavior=scroll direction="right">Votre message ici</marquee>

Votre message ici


Ou vers en haut :
<marquee behavior=scroll direction="up">Votre message ici</marquee>

Votre message ici

Ou vers en bas :
<marquee behavior=scroll direction="down">Votre message ici</marquee>

Votre message ici

C'est rigolo, mais c'est pas toujours pratique pour les visiteurs... ils doivent parfois attendre que le texte repassse un deuxième fois, car ils se sont laissés surprendre...
Pour y rémédier, il suffit d'empêcher le texte de sortir de l'article ou du module une fois arrivé à sa place, il se stoppe :
<marquee behavior=slide direction=left>Votre message ici</marquee>

Votre message ici



Oui, mais les aficionados de l'animation vont penser que ce n'est pas très amusant que le texte arrête de bouger...
Alors on peut lui dier de faire aller-retour sans cesse sans sortir de l'article ou du module (ou de sa page web).
<marquee behavior=alternate direction=left>Votre message ici</marquee>

Votre message ici



Mais on peut faire plus !
On peut indiquer une zone de couleur qui peut faire un arrière plan et qui délimite l'animation.
Par exemple, je met le texte sur fond orange de 500px de largeur et je le centre dans la page :
<center><marquee behavior="alternate" bgcolor="#FF3300" width="500">votre message ici </marquee></center>
votre message ici



Il est aussi possible de définir la vitesse des défilements en rajoutant : scrollamount
<marquee behavior=scroll direction="left" scrollamount="1">Votre message ici</marquee>
Votre message ici

La vitesse est croissante comme les nombre. 1 est le plus lent ...
<marquee behavior=scroll direction="left" scrollamount="30">Votre message ici</marquee>

Votre message ici



C'est aussi possible pour les images...
<marquee behavior=alternate direction="left"><img src="http://urldelimage.jpg" width="largeur de l'image" "height="hauteur de l'image" border="0"></a></marquee>
Exemple :
<marquee behavior=alternate direction="left"><img src="http://fdata.over-blog.com/1/46/60/50/avatar-user-481998-tmpphpjdVn5y.jpg" width="115" "height="119" border="0"></a></marquee>

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

Carine 06/12/2009 22:13


Merci beaucoup pour le coup de main !
Excellente semaine...
^^


Carine 02/12/2009 17:24


Merci beaucoup pour tous ces tuyaux !...
Dommage qu'on soit obligé de retaper tous les codes et que la fonction copier-coller soit bloquée...
Du coup, je ne dois pas être bien douée en passant, je n'arrive même pas à faire dérouler une phrase...
Il y a bien écrit HTML en haut à gauche, et quand je tepa le code proposé autour de mon texte atcuel, rien !
Tant pis pour moi, pas douée comme je suis !

Encore merci !


Christelle Vinsonneau 06/12/2009 12:15


Pour copier, c'est très simple :
il suffit de sélectionner le texte avec la souris (ou le pad) comme habituellement et au lieu de vouloir faire "copier" avec le clic droit, il suffit d'utiliser le raccourci suivant : taper
simultanément Ctrl et C puis d'aller dans l'éditeur et de coller où bon te semble.

Il ne faut pas seulement que "html" soit écrit en haut à gauche, il faut cliquer sur le bouton pour qu'une nouvelle fenêtre s'ouvre et c'est là que tu vas insérer ton code. Ensuite tu valides et
c'est bon.


christophe 31/07/2009 10:01

Bonjour,
Pour ma part cela ne fonctionne pas. Impossible de faire défiler le message sous firefox ou IE. J'ai respecté scrupuleusement les codes pourtant. Une autre solution peut-être ? Par avance merci.

Christelle Vinsonneau 24/08/2009 08:49


C'est très étonnant !
Il doit y avoir autre chose dans ta source qui "bloque" ou une légère erreur de code. Cette solution est la plus simple, la plus compatible....


tachillon-SF~ 23/07/2009 14:48

Wow merci !!! C'est exactement ça que je cherchais !

Christelle Vinsonneau 24/07/2009 10:17


Et bien j'en suis ravie !


StorMette 19/02/2009 15:19

Très bonne idée ça, simple et efficace, je sens qu'on va pouvoir faire un petit article rigolo, voir un nouveau look pour BOB !
Merci Christine.

Photo.Graph 01/03/2009 14:22


Tant mieux...