Skip to content
Related Articles

Related Articles

Improve Article

Change Image Dynamically when User Scrolls Down | Set 2

  • Last Updated : 05 Jun, 2020
Geek Week

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
  • 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=
        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 = 
            else
                image.src = 
        }
    </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=
                id="image1">
            </div>
            <div class="footerColumn">
                <img src=
                    id="image2">
            </div>
            <div class="footerColumn">
                <img src=
                    id="image3">
            </div>
            <div class="footerColumn">
                <img src=
                    id="image4">
            </div>
        </div>
    </div>
  
    <script>
        window.onscroll = function () {
            scrollFunction();
        };
  
        function scrollFunction() {
            var imageSource1 = 
            var imageSource2 = 
            var imageSource3 = 
            var imageSource4 = 
  
            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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :