79 lines
1.6 KiB
CSS
79 lines
1.6 KiB
CSS
.image-carousel {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background: var(--wash);
|
|
/* Each image owns a 5s slot; the cycle must span every image or the last
|
|
one collides with the first and paints over it. */
|
|
--carousel-count: 3;
|
|
}
|
|
.image-carousel--n2 {
|
|
--carousel-count: 2;
|
|
}
|
|
.image-carousel--n3 {
|
|
--carousel-count: 3;
|
|
}
|
|
.image-carousel--n4 {
|
|
--carousel-count: 4;
|
|
}
|
|
.image-carousel--n5 {
|
|
--carousel-count: 5;
|
|
}
|
|
.image-carousel--n6 {
|
|
--carousel-count: 6;
|
|
}
|
|
.image-carousel__image {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0;
|
|
animation: carousel-fade calc(var(--carousel-count) * 5s) infinite;
|
|
}
|
|
.image-carousel__image:nth-child(2) {
|
|
animation-delay: 5s;
|
|
}
|
|
.image-carousel__image:nth-child(3) {
|
|
animation-delay: 10s;
|
|
}
|
|
.image-carousel__image:nth-child(4) {
|
|
animation-delay: 15s;
|
|
}
|
|
.image-carousel__image:nth-child(5) {
|
|
animation-delay: 20s;
|
|
}
|
|
.image-carousel__image:nth-child(6) {
|
|
animation-delay: 25s;
|
|
}
|
|
/* Each slide fades IN over the previous one (which stays opaque beneath it),
|
|
so there is never a moment with no image on screen — works for any count. */
|
|
@keyframes carousel-fade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
}
|
|
4%,
|
|
96% {
|
|
opacity: 1;
|
|
}
|
|
96% {
|
|
transform: scale(1.015);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.015);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.image-carousel__image {
|
|
animation: none;
|
|
opacity: 0;
|
|
transform: none;
|
|
}
|
|
.image-carousel__image:first-child {
|
|
opacity: 1;
|
|
}
|
|
}
|