Comment faire un Texte défilant en css ?
Le plus simple pour faire un texte qui défile, c’est d’utiliser la balise <marquee> pour encadrer la partie à faire défiler. C’est simple certes, mais marquee étant une balise propriétaire de Microsoft, elle n’est pas valide w3c (bien qu’elle soit correctement interprétée par tous les navigateurs) et quand on se soucie d’avoir un site valide elle est donc exclue.
Une autre solution, un peu plus complexe mais cependant accessible est d’utiliser javascript pour simuler le défilement. C’est d’ailleurs la solution qui est le plus proposée par les internautes. Mais comment faire si, pour une raison ou une autre on ne veut pas ou ne peut pas utiliser javascript ?
Depuis css3, la solution la plus propre – Si on part du principe que ceux qui utilisent encore des navigateurs de la préhistoire n’ont pas à être pris en compte – est d’utiliser la propriété animation pour faire son texte défilant en css.
On commence par un conteneur parent auquel il faut ajouter une classe, par exemple .defileParent. Ce parent peut être un bloc div, un paragraphe p ou peu importe.
[pastacode lang= »css » message= » » highlight= »7″ provider= »manual »]
.defileParent {
display: block;
margin: 3em auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 700px;
}[/pastacode]
Attention la ligne 7 dépend de l’environnement dans lequel le texte défilant devra être placé car sa largeur doit idéalement correspondre à celle du texte (avec une petite astuce pour les designs responsive). Si vous avez plusieurs textes de longueurs différentes à animer, il faudra créer des classes de taille, ou bien décider de ne pas mettre en place la diffusion continue.
Ensuite on met en place le contenu, une div, un span ou peu importe, auquel on ajoute une classe, par exemple .defile.
[pastacode lang= »css » message= » » highlight= »3″ provider= »manual »]
.defile {
display:block;
animation:linear marqueelike 20s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}[/pastacode]
Cependant ce code là risque de ne pas passer pour tous les navigateurs, pour s’en prémunir on peut préfixer la balise animation, avec -webkit- pour chrome, -moz- pour firefox, -o- pour opera et -ms- pour internet explorer
[pastacode lang= »css » message= » » highlight= »3-7″ provider= »manual »]
.defile {
display:block;
-webkit-animation:linear marqueelike 20s infinite ;
-moz-animation:linear marqueelike 20s infinite ;
-o-animation:linear marqueelike 20s infinite ;
-ms-animation:linear marqueelike 20s infinite ;
animation:linear marqueelike 20s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}[/pastacode]
Dans notre css de contenu on appelle l’animation qui porte le nom de marqueelike, mais ça peut être celui que vous choisissez. Maintenant il ne manque plus qu’à créer l’animation avec @keyframes
[pastacode lang= »css » message= » » highlight= » » provider= »manual »]
@-webkit-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}[/pastacode]
Mais là encore une fois pour être compris par le plus de navigateurs possible on va préfixer.
[pastacode lang= »css » message= » » highlight= » » provider= »manual »]
@-webkit-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-moz-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-o-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-ms-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}[/pastacode]
Avec seulement ces quelques lignes vous avez une jolie animation de la droite vers la gauche mais elle ne sera pas continue (elle va totalement disparaître de l’écran avant de réapparaître). Pour gérer le continu, on va utiliser l’attribut data-text et cloner le texte à l’intérieur.
[pastacode lang= »markup » message= » » highlight= »3″ provider= »manual »]
<div class="defileParent">
<span class="defile"
data-text=" Texte défilant en css et l'utilisation de l'attribut data-text pour fournir un roulement continu ">
Texte défilant en css et l'utilisation de l'attribut data-text pour fournir un roulement continu
</span>
</div>[/pastacode]
Et on utilisera dans le css la pseudo classe :after pour le placer à l’endroit voulu.
[pastacode lang= »css » message= » » highlight= » » provider= »manual »]
.defile:after {
content:attr(data-text);
position:absolute;
white-space:nowrap;
padding-left:10px;
}[/pastacode]
Avec la petite astuce pour les designs responsive, lorsque la taille de votre texte est trop grande pour la taille de l’écran :
[pastacode lang= »css » message= » » highlight= »1,8,13-17″ provider= »manual »]
@media only screen and (max-width: 860px) {
.defileParent {
display: block;
margin: 3em auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 100%;
}
.defile {
display:block;
-webkit-animation:linear marqueelike 15s infinite ;
-moz-animation:linear marqueelike 15s infinite ;
-o-animation:linear marqueelike 15s infinite ;
-ms-animation:linear marqueelike 15s infinite ;
animation:linear marqueelike 15s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
}[/pastacode]
Pour choisir le max-width: 860px (l1), j’ai simplement regardé la taille que la fenêtre avait au moment ou le 700px prenait 100% de la place et je le remplace par 100 (l8). J’augmente aussi un peu la vitesse de l’animation en baissant la durée pour éviter de s’endormir trop dessus. Bilan, l’animation est parfaite au dessus d’un écran à 860px et un peu saccadée au niveau de la boucle mais relativement visionnable en dessous.
Et voici au final le fichier css complet :
[pastacode lang= »css » message= » » highlight= » » provider= »manual »]
/* Texte défilant */
.defileParent {
display: block;
margin: 3em auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 700px;
}
.defile {
display:block;
-webkit-animation:linear marqueelike 20s infinite ;
-moz-animation:linear marqueelike 20s infinite ;
-o-animation:linear marqueelike 20s infinite ;
-ms-animation:linear marqueelike 20s infinite ;
animation:linear marqueelike 20s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
.defile:after {
content:attr(data-text);
position:absolute;
white-space:nowrap;
padding-left:10px;
}
@-webkit-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-moz-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-o-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@-ms-keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@keyframes marqueelike {
0%, 100% {margin-left:0;}
99.99% {margin-left:-100%;}
}
@media only screen and (max-width: 860px) {
.defileParent {
display: block;
margin: 3em auto;
overflow: hidden;
position: relative;
table-layout: fixed;
width: 100%;
}
.defile {
display:block;
-webkit-animation:linear marqueelike 15s infinite ;
-moz-animation:linear marqueelike 15s infinite ;
-o-animation:linear marqueelike 15s infinite ;
-ms-animation:linear marqueelike 15s infinite ;
animation:linear marqueelike 15s infinite ;
margin-left:-100%;
padding:0 5px;
text-align:left;
height:25px;
}
}[/pastacode]
