How to Change Image Dynamically when User Scrolls using JavaScript ?

Last Updated : 25 Jun, 2020

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.

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

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

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

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

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

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

Output:

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

My Personal Notes

Related Articles