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