Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Lightbox/slideshow/slider

Slideshow responsive CSS (animation propriété mask)

Petit effet de balayage :

Télécharger l'exemple

Code :

HTML 


<ul class="slideshow1">
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
</ul>
CSS 
  

*{border-sizing: border-box}

ul{padding: 0;margin: 0}
img{max-width:100%}

.slideshow1 [src]{
position: absolute;
opacity: 0;
left: 0;
top: 0;
mask: linear-gradient(45deg,white 47%,transparent 52%);
mask-size: 300% 100%;
animation: slide 9s linear infinite}
       
.slideshow1{

position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border: 5px solid #fff;
box-shadow: 0 1px 4px hsla(0,0%,0%,.4)}

.slideshow1 [src="image.jpg"]{
	
	animation-delay:3s
		
	}
	
.slideshow1 [src="image.jpg"]{
	
	animation-delay:6s
	
	}


@keyframes slide{
12% {opacity: 1}
25% {opacity: 1;mask-position: 0}
32% {opacity: 0;mask-position: 100%}
100% {opacity: 0}
	}

Effet store :

Code :

HTML 


<div class="slideshow">
<ul>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
<li><img src="votre_image" alt></li>
</ul>
</div>
CSS 


*{border-sizing: border-box}

ul{padding: 0;margin: 0}

img{max-width:100%}

.slideshow{
width: 500px;
height: 300px;
border: 5px solid hsl(0,0%,100%);
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
overflow: hidden;
position: relative
	}
    
    
.slideshow li{
height: 300px;
width: 500px;
top: 0;
left: 0;
position: absolute;
opacity: 0;
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 li:nth-child(2){
	
	animation-delay: 5s
		
	}
	
.slideshow li:nth-child(3){
	
	animation-delay: 10s
		
	}
	
.slideshow li:nth-child(4){
	
	animation-delay: 15s
		
	}
	
.slideshow li:nth-child(5){
	
	animation-delay: 20s
	}
    
@keyframes slideshow{
0% {opacity: 0}
10% {opacity: 1}
20% {opacity: 1;
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%}    
25%{opacity:0;mask-size: 0% 100%}
100%{opacity:0}
	}

Support navigateurs :

CSS masks

Source, inspiration, ressources :

source originale .

Voir sur ce blog d'autres exemples de masque en CSS.

Voir sur ce blog : comment créer une galerie d'images en CSS.

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.