|
Сообщение от Ops
|
|
первое изображение растворяется и в этот момент начинает появляться второе, следующая картинка.
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel {
position: relative;
z-index: 1;
overflow: hidden;
width: 350px;
height: 170px;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
}
.carousel:before {
z-index: -1;
position: absolute;
left: 0;
top: 0;
content: var(--src_before);
background-size: cover;
}
.carousel:after {
z-index: -1;
position: absolute;
left: 0;
top: 0;
content: var(--src_after);
opacity: var(--opacity_after);
background-size: cover;
}
.carousel.vertical {
width: 170px;
height: 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".carousel").forEach(function(el) {
let {
src,
num,
pause = 3000,
i = num - 1,
op = 1,
delta = .005
} = el.dataset;
function hide() {
op += delta;
if (op < 0) {
op = 0;
delta = -delta;
i++;
i %= num;
let url = src + (i + 1);
el.style.setProperty("--src_after", `url('${url}')`);
}
el.style.setProperty("--opacity_after", op);
requestAnimationFrame(op == 0 ? show : hide);
}
function show() {
op += delta;
if (op > 1) op = 1;
el.style.setProperty("--opacity_after", op);
if (op < 1) requestAnimationFrame(show);
else {
let url = src + (i + 1);
el.style.setProperty("--src_before", `url('${url}')`);
delta = -delta;
window.setTimeout(hide, pause);
}
}
requestAnimationFrame(show);
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000" data-num=3 data-src='https://loremflickr.com/350/170/kitty,kitten?random='>
12345
</div>
<div class="carousel vertical" data-pause="5000" data-num=12 data-src='https://loremflickr.com/170/350/dog,hound?random='>
12345
</div>
</body>
</html>