Marquee en CSS
- Votre information ici.
- Votre information 2 ici.
- Votre information 3 ici.
- Votre information 4 ici.
Code :
HTML
<ul class="marquee">
<li>Votre information ici.</li>
<li>Votre information ici.</li>
<li>Votre information ici.</li>
<li>Votre information ici.</li>
</ul>
CSS
*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
.marquee{
max-width:100%;
width:500px;
height:30px;
margin:4rem auto;
overflow:hidden;
position:relative;
}
.marquee li{
position:absolute;
left:0;
right:0;
height:100%;
display:grid;
place-items:center;
font-size:1.25rem;
-webkit-transform:translateX(100%);
transform:translateX(100%);/*important 100%*/
}
.marquee::before{
z-index:1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0))
}
.marquee::after{
z-index:1;
content: '';
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
background-image: linear-gradient(-90deg, white 70%, rgba(255,255,255,0))
}
/*l'animation dure 40s avec delai de 10s entre chaque texte*/
.marquee li:nth-child(n){animation:defilement 40s ease infinite;-webkit-animation:defilement 40s ease infinite}
/*delai de 10s entre chaque texte*/
.marquee li:nth-child(1){}/*texte 1*/
.marquee li:nth-child(2){animation-delay:10s;-webkit-animation-delay:10s}/*texte 2*/
.marquee li:nth-child(3){animation-delay:20s;-webkit-animation-delay:20s}/*texte 3*/
.marquee li:nth-child(4){animation-delay:30s;-webkit-animation-delay:30s}/*texte 4*/
/*animation*/
@keyframes defilement{0%{transform:translatex(100%)}10%{transform:translatex(0)}20%{transform:translatex(0);opacity:.8}50%{transform:translatex(-100%);opacity:0}100%{transform:translatex(-100%)}}
/*animation webkit*/
@-webkit-keyframes defilement{0%{-webkit-transform:translatex(100%)}10%{-webkit-transform:translatex(0)}20%{-webkit-transform:translatex(0);opacity:.8}50%{-webkit-transform:translatex(-100%);opacity:0}100%{-webkit-transform:translatex(-100%)}}
Support navigateurs :
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.