How to Change Image Dynamically when User Scrolls using JavaScript ? Last Updated : 02 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. 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. Comment More infoAdvertise with us Next Article How to Create Image Gallery using JavaScript? A Archaic Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads JavaScript- Set an Image Source Dynamically Using JS These are the following ways to change the given image dynamically: 1. Using src Property of JSThe approach behind this code is to allow the user to change an image dynamically when they click a button. Upon clicking the "Change Image" button, the 'changeImage' function is triggered, which updates t 2 min read Change Image Dynamically when User Scrolls Down | Set 2 Change Image Dynamically when User Scrolls using JavaScript | Set 1There may be situations where the image would need to change dynamically based on the user's input. In this case, when the user scrolls down. Approach:Setting up a scroll event listener to know the user has scrolled the page.Calculat 4 min read How to Zoom an Image on Scroll using JavaScript? Zoom in and out of images is a common feature in web development. One way to achieve this effect is by using JavaScript to zoom in and out of an image when the user scrolls. In this article, we will go through the steps needed to create a zoomable image using JavaScript.Step 1: HTML Markup: The firs 3 min read How to Create Image Gallery using JavaScript? An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Pro 3 min read How to identify which element scroll is being used using JavaScript ? To identify which element is being scrolled using JavaScript, you can attach scroll event listeners to specific elements. This allows you to determine which element's scroll event is active, enabling tailored responses or interactions based on the particular element being scrolled.Using Scroll event 3 min read How to Scroll to an Element Inside a Div using JavaScript? To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container. Below are the methods to scroll to an element inside a Div using JavaScript:Table of Content Using scrollIntoVi 3 min read Like