Javascript - Need An Image To Disappear Momentarily While The The Other Image Transitions
**Hi, fellow Developers! I'm in bit of a rut. I am currently working on making an image fade and transition to another image using Javascript. I'm new to code (and stackoverlow) an
Solution 1:
Fading can be made with animation CSS. Liked the code above and I just added a small code `.animate()'.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Image Transition</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
img {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
#three {
background-color: green;
}
</style>
</head>
<body>
<div id="scroll-image">
<img src="SnugBear_home.png" class="test" id="one"/>
<img src="img.png" class="test" id="two"/>
<img src="img2.png" class="test" id="three"/>
</div>
<script>
startImageTransition();
function startImageTransition() {
var images = document.getElementsByClassName("test");
for ( var i = 0; i < images.length; ++i) {
images[i].style.opacity = 1;
}
var top = 1;
var cur = images.length - 1;
setInterval(changeImage, 3000);
async function changeImage() {
var nextImage = (1 + cur) % images.length;
images[cur].style.zIndex = top + 1;
images[cur].animate([
{opacity: 1},
{opacity: 0}
], 3000)
images[nextImage].style.zIndex = top;
images[nextImage].animate([
{opacity: 0},
{opacity: 1}
], 3000)
images[cur].style.zIndex = top;
images[nextImage].style.zIndex = top + 1;
top = top + 1;
images[cur].style.opacity = 1;
cur = nextImage;
}
function transition() {
return new Promise(function(resolve, reject) {
var del = 0.01;
var id = setInterval (changeOpacity, 10);
function changeOpacity() {
images[cur].style.opacity -= del;
if (images[cur].style.opacity <= 0) {
clearInterval(id);
resolve();
}
}
})
}
}
</script>
</body>
</html>
Post a Comment for "Javascript - Need An Image To Disappear Momentarily While The The Other Image Transitions"