How to Change Image Dynamically when User Scrolls using JavaScript ?

19 Jan, 2022
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.  
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="CSS.png" class="test" />        <img src="html.png" class="test" />        <img src="php.png" class="test" />    </div></body> </html>                   
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. 
html
<style>    body {        text-align: center;    }    h1 {        color: green;    }    img {        position: absolute;        left: 300px;    }</style>
Javascript code: In this section we will add JavaScript code to perform the scrolling on the image. 
javascript
<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>
Final Solution: In this section we will combine the above three section.  
JavaScript
<!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>
Output:  
Note: The above code will change image only if mouse if over the image. 
arorakashish0911
Vijay Sirra
rajeev0719singh
rkbhola5
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
How to auto-resize an image to fit a div container using CSS?
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS