Meric-Graphisme - Texte défilant

Il est possible de faire défiler un texte horizontalement dans les boîtes latérales, mais dans la plupart des cas, il est plus pratique que ce défilement soit orienté verticalement.

Pour les exemples ci-dessous on suppose que la "hauteur disponible" pour le défilement est de 180px et que le "taux" d'occupation de la boîte sur sa largeur sera de 90%.

TITRE DE LA BOITE

En utilisant la même balise, il est possible de faire défiler le texte verticalement
Ici
du bas
vers le haut

Il faut ici utiliser la balise marquee auquelle il sera nécessaire d'indiquer la direction de défilement du texte ici up

Pour faire défiler le texte du bas vers le haut, recopier le code ci-dessous

CODE

<marquee direction="up" scrollamount="4" 
style="padding: 5px; width: 90%; height: 180px;
  <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>

Du haut vers le bas :

TITRE DE LA BOITE

En utilisant la même balise, il est possible de faire défiler le texte verticalement
Ici
du haut
vers le bas

Il faut ici utiliser la balise marquee auquelle il sera nécessaire d'indiquer la direction de défilement du texte ici down

Pour faire défiler le texte du haut vers le bas, recopier le code ci-dessous :

CODE

<marquee direction="down" scrollamount="4" 
style="padding: 5px; width: 90%; height: 180px;
  <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>

Il est possible comme pour le défilement horizontal, d'en régler la vitesse.

TITRE DE LA BOITE

Pour donner le temps à vos visiteurs de lire le texte sans devoir battre un record de vitesse de lecture, il est possible de diminuer la vitesse de défilement

Comme précédemment nous utiliserons l'attribut scrollamount suivi du nombre permettant de définir la vitesse 'dans cet exemple le réglage est à 2

Pour faire défiler le texte du bas vers le haut et régler la vitesse de défilement, recopier le code ci-dessous :

CODE

<marquee direction="up" scrollamount="2" 
style="padding: 5px; width: 90%; height: 180px;
  <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>

Il est parfois utile d'arrêter provisoirement le défilement pour le reprendre par la suite.

TITRE DE LA BOITE

Comme précédemment le défilement peut être continu. Si le visiteur passe le pointeur de la souris dans la zone de texte ce défilement doit s'arrêter

Le passage de la souris sur le texte a pour effet d'en arrêter le défilement et lorsque celle-ci quitte cette même zone, le défilement reprend.

Pour faire défiler le texte du bas vers le haut, de régler la vitesse de défilement et d'interrompre celui-ci au passage de la souris, recopier le code ci-dessous :

CODE

<marquee direction="up" scrollamount="2" 
 onmouseout="this.start()" 
 style="padding: 5px; width: 90%; height: 180px;
 "onmouseover="this.stop()">
 <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>

Date de création : 05/01/2008 @ 15:28
Dernière modification : 04/05/2008 @ 07:25
Catégorie :
Page lue 6369 fois

Imprimer l'article

Réactions à cet article

Réaction n°2

par saadou le 22/10/2009 @ 23:52

Bonsoir,

Votre site est une caverne d'Ali Baba, j'y reviendrai régulièrement pour s'y former, et s'en inspirer... CHAPEAU pour votre générosité..

Cordialement

Réaction n°1

par plusdetout le 26/04/2008 @ 18:51

Je profite de l'occasion pour vous remercier pour votre travail, j'utilise votre chic-ciel sur le site de notre Société.
Avec « marquee », puis-je compliquer la présentation?
J'aimerais y faire défiler des vignettes prises dans la liste du module Photos de Guppy, que le défilement se fige au passage de la souris et que sur un clic gauche, la photo dans reliée à la vignette s'affiche tel que si on était dans Photos.
Ouf! Suis-je assez explicite? J'espère.
Cordialement,
Rita Lavoie

Tags Cloud

Tags Cloud

Skins au choix

Choisissez une skin

Skin :

Connexion...

Membres : 418

Visites du jour : (1) martial

[ Mot de passe perdu ? ]

[ Devenir membre ]

Membre en ligne :

Anonymes en ligne : 5

Total visites: 715956

Record connectés :

Membres: 23

Le 26/12/2007 @ 21:50

Webmaster - Infos

Calendrier

Tchat non-Membres

Vous devez être connectés en tant que membre pour accéder au Tchat

Recherche

Sites skins Guppy

Astrographisme
Charli77 Skins V4.6
Chez Papinou
Guppy Skins
Guppy style
Le style de GuppY

Lettre d'information

Outils en ligne

Graphisme

Générateur de boutons

Générateur de fonds
Stickers ou badges
Retoucher les Gifs

CSS

Validation W3C

Divers

Browsers shots

Sondage

Nouvelles des Amis

Chez Papinou

FreeGuppy

StockAstuces

association freeGuppY

Visites

715956 visiteurs

8 visiteurs en ligne

Liens

Haut

Conformément à la loi française Informatique et Liberté (article 34), vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant.

Document généré en 0.78 seconde