How to Change Image Dynamically when User Scrolls using JavaScript ?

Last Updated : 02 Aug, 2024

We are going to add the functionality to our web-page so that whenever the user scrolls up or scrolls down on the image, then the image changes. We have used only 3 images but it can easily be expanded for multiple images.
We are keeping the images on top of each other, this makes sure only one image is visible at a time. When we scroll, we decrement the z-coordinate of the current image and increments the z-coordinate of the new image. By doing this the new image overlays the old image and it comes on top of all images and becomes visible.

HTML Code: It is used to create a basic structure to include images.
CSS Code: Css is used to design the structure. The position property is the most important things here. It will make all the images to appear on top of each other.
Javascript code: In this section we will add JavaScript code to perform the scrolling on the image.

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>
        Change image dynamically
        when user scrolls
    </title>
    
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        img {
            position: absolute;
            left: 300px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    
    <b>A Computer Science Portal for Geeks</b>
    
    <div id="scroll-image">
        <img src="CSS.png" class="test" />
        <img src="html.png" class="test" />
        <img src="php.png" class="test" />
    </div>
    
    <script>
        window.onload = function() {
     
            // Index of current image
            // which is on display
            var imageIndex = 0;
     
            // Object array of all the
            // images of class test
            var images = 
                document.getElementsByClassName('test');
     
            // This tells us if mouse if over
            // image or not, We only change
            // image if mouse if over it
            var isMouseOverImage = false;
     
            // Object of parent element 
            // containing all images
            var scrollImages = 
                document.getElementById('scroll-image');
     
            // Stores the current scroll co-ordinates
            // so that the window don't scroll down
            // while scrolling the images
            var x, y;
     
            // This function sets the scroll to x, y
            function noScroll() {
                window.scrollTo(x, y);
            }
     
            // The following event id fired once when 
            // We hover mouse over the images
            scrollImages.addEventListener(
                    "mouseenter", function() {
     
                // We store the current page
                // offset to x,y
                x = window.pageXOffset;
                y = window.pageYOffset;
     
                // We add the following event to
                // window object, so if we scroll
                // down after mouse is over the 
                // image we can avoid scrolling
                // the window
                window.addEventListener("scroll", noScroll);
                
                // We set isMouseOverImage to
                // true, this means Mouse is
                // now over the image
                isMouseOverImage = true;
            });
     
            // The following function is fired
            // when mouse is no longer over
            // the images
            scrollImages.addEventListener(
                    "mouseleave", function() {
     
                // We set isMouseOverImage to
                // false, this means mouse is
                // not over the image
                isMouseOverImage = false;
     
                // We remove the event we previously
                // added because we are no longer
                // over the image, the scroll will
                // now scroll the window
                window.removeEventListener(
                            "scroll", noScroll);
            });
     
            // The following function is called
            // when we move mouse wheel over
            // the images
            scrollImages.addEventListener(
                        "wheel", function(e) {
                                
                // We check if we are over
                // image or not
                if (isMouseOverImage) {
                    var nextImageIndex;
     
                    // The following condition
                    // finds the next image
                    // index depending if we
                    // scroll up or scroll down
                    if (e.deltaY > 0)
                        nextImageIndex = (imageIndex + 1)
                                         % images.length;
                    else
                        nextImageIndex = 
                                (imageIndex - 1
                                + images.length)
                                % images.length;
     
                    // We set the z index of current
                    // image to 0
                    images[imageIndex].style.zIndex = "0";
                        
                    // We set the z index of next
                    // image to 1, this makes 
                    // The new image appear on top
                    // of old image
                    images[nextImageIndex].style.zIndex = "1";
                    imageIndex = nextImageIndex;
                }
            });
        }
    </script>
</body>
 
</html>