Aller au contenu principal

Slideshow responsive CSS propriété mask

Votre navigateur ne supporte pas cette démonstration



<div class="slideshow stores">

<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>


<div class="slideshow balayage">

<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}

.slideshow{
	
margin:5rem auto;
max-width: 600px;
aspect-ratio:3/2;
border: 5px solid white;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.29);
overflow: hidden;
position: relative;
	
	}
@supports not (aspect-ratio:3/2){		
.no-aspect {

padding-top: 66.67%;
		
	}
		
	}    
    
.slideshow img{
	
height: 100%;
width:100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
-webkit-mask-image:var(--mask-effet);
animation-duration: 15s;
animation-iteration-count: 	infinite;
animation-timing-function: linear;  
	
}
	

/**************animation generale*************************/
.slideshow img:nth-child(2){
	
	animation-delay: 3s
		
	}
	
.slideshow img:nth-child(3){
	
	animation-delay: 6s
		
	}
	
.slideshow img:nth-child(4){
	
	animation-delay: 9s
		
	}
	
.slideshow img:nth-child(5){
	
	animation-delay: 12s
	}
/**************animation generale*************************/  

@property --stores {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}	
	
	
		
.stores img	{
	
--taille-stores: 40px;
--stores: var(--taille-stores);
animation-name: slideshow-store;
--mask-effet:repeating-linear-gradient(var(--direction-mask),black,black var(--stores), transparent var(--stores),transparent var(--taille-stores));
/*pour changer la direction*/--direction-mask:to bottom
	
	}
	

	
	
	
@keyframes slideshow-store{
0%,100% {opacity: 0;--stores: 0px;}
6.67% {opacity: 1;--stores: 40px;}
20% {opacity: 1;--stores: 40px;}    
26.67%{opacity:0;--stores: 40px;}
		
	}	
	
	
	
@property --balayage {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
		
.balayage img	{
	
--balayage: 100%;
--mask-balayage:10%;	
animation-name: slideshow-balayage;
--mask-effet:linear-gradient(
var(--direction-mask),black var(--balayage),
transparent calc(var(--balayage) + var(--mask-balayage)),transparent);
/*pour changer la direction*/--direction-mask:to bottom	
	}

	

	
@keyframes slideshow-balayage{
0%,100% {opacity: 0;--balayage: 100%}
6.67% {opacity: 1;--balayage: 100%}
20% {opacity: 1;--balayage: 100%}    
26.67%{opacity:0;--balayage: -100%}
		
	}