Slideshow responsive CSS (animation propriété mask
)
Petit effet de balayage :
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 :
Source, inspiration, ressources :
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.