Change Image Dynamically when User Scrolls Down | Set 2

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.