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: