Skip to content
Related Articles

Related Articles

Improve Article

How to Change Image Dynamically when User Scrolls using JavaScript ?

  • Last Updated : 10 May, 2021

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

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :