I am trying to adjust the image source while scrolling down by 20 pixels, so that after 100 pixels the image source changes 5 times, with the initial src image being "falling-05.png". Despite following various tutorials, the implementation doesn't seem to be working as expected. Can anyone assist me in identifying the issue?
HTML
<div class="fixedContainer">
<div class="scrollableContainer">
<img class="character" id="character" src="./images/falling-01.png"/>
</div>
</div>
<div class="anotherContainer"></div>
CSS
.fixedContainer {
position: relative;
width: 100%;
height: 100%;
background-color: red;
overflow-y: scroll;
}
.scrollableContainer {
position: relative;
width: 100%;
height: 1800px;
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1)
100%);
}
.anotherContainer {
position: relative;
width: 100%;
height: 800px;
background-color: white;
display: ;
}
.character {
position: fixed;
right: 140px;
top: 150px;
}
JAVASCRIPT
var image = document.getElementById("character");
var sources = ["falling-01.png", "falling-02.png", "falling-03.png", "falling-04.png", "falling-05.png", "falling-06.png", "falling-07.png", "falling-08.png", "falling-09.png"];
var i = 0;
var breakpoint = 20; // Change to whatever you like
window.addEventListener("scroll", function() {
var scrollDown = document.body.scrollTop;
if (scrollDown >= breakpoint) {
img.setAttribute(src, sources[i]);
breakpoint += 20; //Change to whatever you like
i++;
}
}