Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Javascript - Need An Image To Disappear Momentarily While The The Other Image Transitions

Post a Comment
**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()'.

<htmllang="en"><head><metacharset="UTF-8"><metaname="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><divid="scroll-image"><imgsrc="SnugBear_home.png"class="test"id="one"/><imgsrc="img.png"class="test"id="two"/><imgsrc="img2.png"class="test"id="three"/></div><script>startImageTransition();
    
            functionstartImageTransition() {
                
                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);    
    
            asyncfunctionchangeImage() {
    
                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;
            }
                    functiontransition() {
                    returnnewPromise(function(resolve, reject) {
   
                        var del = 0.01;
    
                       
                        var id = setInterval (changeOpacity, 10);
    
    
            
                        functionchangeOpacity() {
                            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"