Polaroid-like photo carousel.zip
0.00MB
<html>
<link rel="stylesheet" href="style.css">
<head></head>
<body>
<div class="gallery">
<img src="https://picsum.photos/id/1004/400/400" alt="a lovely kiss in the night">
<img src="https://picsum.photos/id/1013/400/400" alt="a women inside a car">
<img src="https://picsum.photos/id/1066/400/400" alt="a baby">
<img src="https://picsum.photos/id/325/400/400" alt="a girl in the forest">
<img src="https://picsum.photos/id/65/400/400" alt="a girl">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
/* number of images*/
.gallery {
--d: 10s;
/* duration */
display: grid;
width: 220px;
}
.gallery > img {
grid-area: 1/1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
animation: slide var(--d) infinite;
}
.gallery img:last-child {
animation-name: slide-last;
}
.gallery > img:nth-child(1) {
animation-delay: calc(0*var(--d));
--r: 12deg;
}
.gallery > img:nth-child(2) {
animation-delay: calc(-0.2*var(--d));
--r: 12deg;
}
.gallery > img:nth-child(3) {
animation-delay: calc(-0.4*var(--d));
--r: -8deg;
}
.gallery > img:nth-child(4) {
animation-delay: calc(-0.6*var(--d));
--r: 8deg;
}
.gallery > img:nth-child(5) {
animation-delay: calc(-0.8*var(--d));
--r: -18deg;
}
@keyframes slide {
0%, 100%, 80.01% {
transform: translateX(0%) rotate(var(--r));
z-index: 3;
}
10% {
transform: translateX(120%) rotate(var(--r));
z-index: 3;
}
10.01% {
transform: translateX(120%) rotate(var(--r));
z-index: -3;
}
20%, 80% {
transform: translateX(0%) rotate(var(--r));
z-index: -3;
}
}
@keyframes slide-last {
0%, 100%, 90.01% {
transform: translateX(0%) rotate(var(--r));
z-index: 3;
}
10% {
transform: translateX(120%) rotate(var(--r));
z-index: 3;
}
10.01% {
transform: translateX(120%) rotate(var(--r));
z-index: -3;
}
20%, 90% {
transform: translateX(0%) rotate(var(--r));
z-index: -3;
}
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #CDB380;
overflow: hidden;
}