Image Transition with Fading Effect using JavaScript

Last Updated : 18 Apr, 2025

In this article, we are given some images and the task is the create a slow transition from one image to another using JavaScript.

Prerequisite:

Approach

The function starts by setting the initial opacity of all images to 1 and initializing variables for tracking the topmost image (top) and the current image index (cur).
It then sets up an interval setInterval to call the changeImage function every 3 seconds.
The changeImage function transitions from one image to the next by adjusting the z-index of the current and next images. It uses the transition function to gradually decrease the opacity of the current image.
The transition function returns a promise, ensuring that the program waits for the opacity transition to complete before executing the next steps.
Inside transition, a separate setInterval It is used to decrease the opacity of the current image until it reaches 0. Once the opacity is 0, the interval is cleared, and the promise is resolved.

Example: below is the implementation of above above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
    text-align: center;
}
h1 {
    color: green;
        }
img {
    position: absolute;
    left: 400px;
}
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <b>A Computer Science Portal for Geeks</b>
    <div id="scroll-image">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" 
             class="test" />
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" 
             class="test" />
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" 
             class="test" />
             <script>
                 startImageTransition();
function startImageTransition() {
    let images = document.getElementsByClassName("test");
    for (let i = 0; i < images.length; ++i) {
        images[i].style.opacity = 1;
    }

    let top = 1;
    let cur = images.length - 1;
    setInterval(changeImage, 3000);

    async function changeImage() {

        let nextImage = (1 + cur) % images.length;

        images[cur].style.zIndex = top + 1;
        images[nextImage].style.zIndex = top;

        
        await transition();

        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) {
            let del = 0.01;
            let id = setInterval(changeOpacity, 10);
            function changeOpacity() {
                images[cur].style.opacity -= del;
                if (images[cur].style.opacity <= 0) {
                    clearInterval(id);
                    resolve();
                }
            }
        })
    }
}

             </script>
    </div>
</body>
</html>

Output:

Note: The time interval at which images are changing should be greater than the time it takes to make the opacity of the image less than or equals to 0.

How to add fade-in effect using pure JavaScript ?

Archaic

Improve

Article Tags :

Image Transition with Fading Effect using JavaScript

Prerequisite:

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?