Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Marquee en CSS

Dernière modification : août 2022

  • Votre information ici.
  • Votre information 2 ici.
  • Votre information 3 ici.
  • Votre information 4 ici.


<ul class="marquee">

<li>Votre information ici.</li>
<li>Votre information ici.</li>
<li>Votre information ici.</li>
<li>Votre information ici.</li>

</ul>




*,
*::before,
*::after{

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: inherit;
display: grid;
place-items: center;
font-size: 1.25rem;
transform: translateX(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;

}

/*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%)}}	



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.