Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Slideshow responsive CSS (animation mask)

Dernière modification : septembre 2022

Le code :



<div class="slideshow">

<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>

</div>




*{box-sizing: border-box}

img{max-width:100%;display:block}

	
.slideshow{

margin:5rem auto;
max-width: 600px;
aspect-ratio:3/2;
border: 5px solid hsl(0,0%,100%);
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.29);
overflow: hidden;
position: relative

	}
    
    
.slideshow img{

height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-mask-image: linear-gradient(to right,red,red);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(to right,red,red);
mask-repeat: no-repeat;
mask-size: 100% 100%;
animation: slideshow 25s linear infinite

}


.slideshow img:nth-child(2){
	
	animation-delay: 5s
		
	}
	
.slideshow img:nth-child(3){
	
	animation-delay: 10s
		
	}
	
.slideshow img:nth-child(4){
	
	animation-delay: 15s
		
	}
	
.slideshow img:nth-child(5){
	
	animation-delay: 20s
	
	}
    
@keyframes slideshow{

0%,100% {

opacity: 0

}

10% {

opacity: 1

}
20% {

opacity: 1;
-webkit-mask-position: 200% 0%;
-webkit-mask-size: 100% 100%;
mask-position: 200% 0%;
mask-size: 100% 100%

} 

25%{
opacity: 0;
-webkit-mask-size: 0% 100%;
mask-size: 0% 100%

}

	}	

 

Le code :



<div class="slideshow">

<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>
<img src="votre_image" alt>

</div>




*{box-sizing: border-box}

img{max-width:100%;display:block}

	
.slideshow{
max-width: 600px;
aspect-ratio:3/2;
border: 5px solid hsl(0,0%,100%);
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
overflow: hidden;
position: relative
	}
    
    
.slideshow img{

height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-mask-image: linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%));
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%)),
linear-gradient(hsl(0,0%,0%),hsl(0,0%,0%));
mask-repeat: no-repeat;
mask-size: 100% 100%;
animation: slideshow 25s linear infinite

}


.slideshow img:nth-child(2){
	
	animation-delay: 5s
		
	}
	
.slideshow img:nth-child(3){
	
	animation-delay: 10s
		
	}
	
.slideshow img:nth-child(4){
	
	animation-delay: 15s
		
	}
	
.slideshow img:nth-child(5){
	
	animation-delay: 20s
	
	}
    
@keyframes slideshow{

0%,100% {

opacity: 0

}

4% {

opacity: 1

}

20% {

opacity: 1;
-webkit-mask-position:
0 0, 
60px 0, 
120px 0, 
180px 0, 
240px 0,
300px 0, 
360px 0, 
420px 0, 
480px 0, 
540px 0;
-webkit-mask-size: 10% 100%;
mask-position:
0 0, 
60px 0, 
120px 0, 
180px 0, 
240px 0,
300px 0, 
360px 0, 
420px 0, 
480px 0, 
540px 0;
mask-size: 10% 100%

} 

24%{

opacity: 0;
-webkit-mask-size: 0% 100%;
mask-size: 0% 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.