Slideshow responsive CSS clip-path
Code :
HTML
<div class=cadre-contenu>
<div class="contenu">
<img src="images/1.jpg" alt>
<img src="images/2.jpg" alt>
<img src="images/3.jpg" alt>
<img src="images/4.jpg" alt>
<img src="images/5.jpg" alt>
<img src="images/6.jpg" alt>
</div>
</div>
CSS
.cadre-contenu{
margin:2rem auto 10rem auto;
max-width:600px;
max-height:400px
}
.contenu {
overflow: hidden;
position: relative;
border: 10px solid white;
box-shadow: 0 0 5px hsla(0,0%,0%,.5);
width: 100%;
height: 0;
padding-top: 75%
}
.contenu img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
animation: slideshow 36s ease-in-out infinite
}
.contenu img:nth-of-type(2){
animation-delay: 6s
}
.contenu img:nth-of-type(3){
animation-delay: 12s
}
.contenu img:nth-of-type(4){
animation-delay: 18s
}
.contenu img:nth-of-type(5){
animation-delay: 24s
}
.contenu img:nth-of-type(6){
animation-delay: 30s
}
@keyframes slideshow{
0%{
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
}
1%, 12.66% {
clip-path: polygon(50% -50%, -15% 0, -15% 100%, 50% 150%, 115% 100%, 115% 0);
}
16.66%, 100% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
}
}
Support navigateurs :
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.