Change Image Dynamically when User Scrolls Down | Set 2
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 = "https://media.w3wiki.net/wp-content/uploads/20200122115631/w3wiki210.png" alt = "w3wiki Logo" id = "myImage" > < div class = "main-content" > < h1 >w3wiki</ 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.w3wiki.net/wp-content/uploads/w3wiki-6.png"; else image.src = "https://media.w3wiki.net/wp-content/uploads/20200122115631/w3wiki210.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 >w3wiki</ 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.w3wiki.net/wp-content/uploads/w3wiki-6.png" id = "image1" > </ div > < div class = "footerColumn" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200122115631/w3wiki210.png" id = "image2" > </ div > < div class = "footerColumn" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200121120603/w3wiki30.png" id = "image3" > </ div > < div class = "footerColumn" > < img src = "https://media.w3wiki.net/wp-content/uploads/20191026152101/Beginner_for_Beginner.jpg" id = "image4" > </ div > </ div > </ div > < script > window.onscroll = function () { scrollFunction(); }; function scrollFunction() { var imageSource1 = "https://media.w3wiki.net/wp-content/uploads/w3wiki-6.png"; var imageSource2 = "https://media.w3wiki.net/wp-content/uploads/20200122115631/w3wiki210.png"; var imageSource3 = "https://media.w3wiki.net/wp-content/uploads/20200121120603/w3wiki30.png"; var imageSource4 = "https://media.w3wiki.net/wp-content/uploads/20191026152101/Beginner_for_Beginner.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:
Contact Us