How to Change Image Dynamically when User Scrolls using JavaScript ?

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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="CSS.png" class="test" />
            <img src="html.png" class="test" />
            <img src="php.png" class="test" />
        </div>
    </body>
      
    </html>                    

    chevron_right

    
    

  • CSS Code: Css is used to desing the structure. The position property is the most important things here. It will make all the images to appear on top of each other.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        img {
            position: absolute;
            left: 300px;
        }
    </style>

    chevron_right

    
    

  • Javscript code: In this section we will add JavaScript code to perform the scrolling on the image.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 scoll 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 iamge
                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 iamge
                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>

    chevron_right

    
    

Final Solution: In this section we will combine the avobe three section.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 scoll 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 iamge
                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 iamge
                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>

chevron_right


Output:

Note: The above code will change image only if mouse if over the image.

full-stack-img




My Personal Notes arrow_drop_up

Hi I am a college student I am interested in teaching and competitive coding I write blogs in my free time on Computer Science subjects Check my blog https//slaystudycom/

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.