Image Transition with Fading Effect using JavaScript

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:

• setInterval() method
• clearInterval() method
• async/await
• Promise

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 using 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 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.

javascript

startImageTransition();

function startImageTransition() {

    // images stores list of all images of
    // class test. This is the list of images
    // that we are going to iterate
    let images = document.getElementsByClassName("test");

    // Set opacity of all images to 1
    for (let i = 0; i < images.length; ++i) {
        images[i].style.opacity = 1;
    }

    // Top stores the z-index of top most image
    let top = 1;

    // cur stores the index of the image currently
    // on top images list contain images in the
    // same order they appear in HTML code
    /* The tag with class test which appears last
       will appear on top of all the images thus,
       cur is set to last index of images list*/
    let cur = images.length - 1;

    // Call changeImage function every 3 second
    // changeImage function changes the image
    setInterval(changeImage, 3000);

    // Function to transitions from one image to other
    async function changeImage() {

        // Stores index of next image
        let nextImage = (1 + cur) % images.length;

        // First set the z-index of current image to top+1
        // then set the z-index of nextImage to top
        /* Doing this make sure that the image below
           the current image is nextImage*/
        // if this is not done then during transition
        // we might see some other image appearing
        // when we change opacity of the current image
        images[cur].style.zIndex = top + 1;
        images[nextImage].style.zIndex = top;

        // await is used to make sure
        // the program waits till transition()
        // is completed
        // before executing the next line of code
        await transition();

        // Now, the transition function is completed
        // thus, we can say that the opacity of the
        // current image is now 0

        // Set the z-index of current image to top
        images[cur].style.zIndex = top;

        // Set the z-index of nextImage to top+1
        images[nextImage].style.zIndex = top + 1;

        // Increment top
        top = top + 1;

        // Change opacity of current image back to 1
        // since zIndex of current is less than zIndex
        // of nextImage
        /* changing it's opacity back to 1 will not
           make the image appear again*/
        images[cur].style.opacity = 1;

        // Set cur to nextImage
        cur = nextImage;
    }

    /* This function changes the opacity of
    current image at regular intervals*/
    function transition() {
        return new Promise(function (resolve, reject) {

            // del is the value by which opacity is
            // decreased every interval
            let del = 0.01;

            // id stores ID of setInterval
            // this ID will be used later
            // to clear/stop setInterval
            // after we are done changing opacity
            let id = setInterval(changeOpacity, 10);

            // changeOpacity() decreasing opacity of
            // current image by del
            // when opacity reaches to 0, we stops/clears
            // the setInterval and resolve the function
            function changeOpacity() {
                images[cur].style.opacity -= del;
                if (images[cur].style.opacity <= 0) {
                    clearInterval(id);
                    resolve();
                }
            }
        })
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
        Change Image Dynamically when User Scrolls
    </title>
</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" />
    </div>
</body>
</html>

CSS

body {
    text-align: center;
}

h1 {
    color: green;
        }

img {
    position: absolute;
    left: 400px;
}

Output: Click here to check the live 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.