Change Image Dynamically when User Scrolls Down | Set 2 - GeeksforGeeks

05 Jun, 2020
Change Image Dynamically when User Scrolls using JavaScript | Set 1
There 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.
Calculating the pixels that have been scrolled up vertically by the user. It is accessed by using the scrollTop element.document.documentElement.scrollTop
document.documentElement.scrollTop
Using that value to change the source of the image dynamically.
Example 1: In this example, we will change the source of the image whenever the page is scrolled 150 pixels vertically. The page consists of an image and a section for the text. They are styled through internal CSS.
The window.onscroll listener would call a function every timewhen the user scrolls. Then, the called function selects the image using document.getElementById("myImage") and changes the source path of the image whenever the scrolled pixels crosses 150px.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>        How to change image dynamically        when user scrolls down?    </title>          <style media="screen">        img {            position: fixed;            width: 30%;        }          .main-content {            padding-left: 35%;            height: 1000px;        }          h1,        h3 {            color: green;        }    </style></head>  <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"        alt="GeeksforGeeks Logo" id="myImage">      <div class="main-content">        <h1>GeeksforGeeks</h1>        <h3>First Image Section</h3>        <p>            Scroll past the below line             to see the change        </p>        <hr>        <h3>Second Image Section</h3>        <p>            Scroll back up to see             the original image        </p>    </div>      <script>        window.onscroll = function () {            scrollFunction();        };          function scrollFunction() {            var image = document.getElementById("myImage");            if (document.documentElement.scrollTop > 150)                image.src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";            else                image.src = "https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png";        }    </script></body>  </html>
Output:
Example 2: In this example, we will change the arrangement of the images dynamically depending on how much the user has scrolled down. The page consists of four images given a sticky position at the bottom of the page.
The function called by the scroll listener shuffles the source of the image dynamically. This gives us a spinning look for the images.
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>        How to Change Image Dynamically when        User Scrolls using JavaScript ?    </title>      <style media="screen">        .main-content {            height: 800px;        }          .footer {            position: sticky;            bottom: 0;            background-color: white;        }          .footerRow::after {            content: "";            clear: both;            display: table;            position: sticky;            bottom: 0;            width: 100%;        }          .footerColumn {            float: left;            width: 25%;            display: table;            position: relative;            margin: auto;        }          img {            width: 100%;        }          h1,        h3 {            color: green;        }    </style></head>  <body>      <div class="main-content">        <h1>GeeksforGeeks</h1>        <h3>Section One</h3>        <p>Scroll here to see the change</p>        <hr>        <h3>Section Two</h3>        <p>Scroll here to see the change</p>        <hr>        <h3>Section Three</h3>        <p>Scroll here to see the change</p>        <hr>        <h3>Section Four</h3>        <p>Scroll here to see the change</p>        <hr>    </div>      <div class="footer">        <div class="footerRow">            <div class="footerColumn">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"                 id="image1">            </div>            <div class="footerColumn">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"                    id="image2">            </div>            <div class="footerColumn">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200121120603/GeeksforGeeks30.png"                    id="image3">            </div>            <div class="footerColumn">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20191026152101/geeks_for_geeks.jpg"                    id="image4">            </div>        </div>    </div>      <script>        window.onscroll = function () {            scrollFunction();        };          function scrollFunction() {            var imageSource1 = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";            var imageSource2 = "https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png";            var imageSource3 = "https://media.geeksforgeeks.org/wp-content/uploads/20200121120603/GeeksforGeeks30.png";            var imageSource4 = "https://media.geeksforgeeks.org/wp-content/uploads/20191026152101/geeks_for_geeks.jpg";              var image1 = document.getElementById("image1");            var image2 = document.getElementById("image2");            var image3 = document.getElementById("image3");            var image4 = document.getElementById("image4");            if (document.documentElement.scrollTop < 150) {                image1.src = imageSource1;                image2.src = imageSource2;                image3.src = imageSource3;                image4.src = imageSource4;            } else if (                document.documentElement.scrollTop < 250) {                image1.src = imageSource2;                image2.src = imageSource3;                image3.src = imageSource4;                image4.src = imageSource1;            } else if (                document.documentElement.scrollTop < 350) {                image1.src = imageSource3;                image2.src = imageSource4;                image3.src = imageSource1;                image4.src = imageSource2;            } else {                image1.src = imageSource4;                image2.src = imageSource1;                image3.src = imageSource2;                image4.src = imageSource3;            }        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
How to apply style to parent if it has child with CSS?
How to auto-resize an image to fit a div container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)