Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Autres

Marquee en CSS

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 :

CSS animation

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.