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>neveropen</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>neveropen</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.
Â
