Change img source each 20 pixels

Question

I would like to change an img src while scrolling down each 20 pixels, so by 100 pixels down from the top it should have changed 5 times, actual src image should be "falling-05.png" I've done this thanks to other tutorials, but while testing, doesn't seems to work properly. Can someone help me out to figure out why?

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++;
}
}

because is not changing the img src every 20 pixels scrolled down hehehe @epascarello — user2875178, Dec 05 '18 at 00:14
did you debug? console.log() is your friend. What is the error message in your console? What is `img` ? — epascarello, Dec 05 '18 at 00:14
only error that appeared is to complete the js file with ), did it, no change. no errors neither now @epascarello — user2875178, Dec 05 '18 at 00:17
created a jsfiddle to check if was my computer or html file, still showing the first image only :( http://jsfiddle.net/9m4uasqz/ @epascarello — user2875178, Dec 05 '18 at 00:21
http://jsfiddle.net/9m4uasqz/3/ <-- simple console.log line shows why it does nothing. You are not scrolling the body.... ;) and again, what is `img` — epascarello, Dec 05 '18 at 00:36

score 4 · Answer 1 · answered Dec 05 '18 at 00:44

first you have a typo:

var image = document.getElementById("character"); <-- defined as image
img.setAttribute(src, sources[i]); <-- referenced as img

Second, you are look at the body for the scroll position

var scrollDown = document.body.scrollTop;

But in your code the part that is scrollable is not the body

.fixedContainer {
  ...
  overflow-y: scroll;
}

score 1 · Accepted Answer · answered Dec 05 '18 at 00:50

1

There are a few issues with your syntax:

missing an ending parenthesis
img and image
src instead of 'src'
display: ; in .anotherContainer

If you use window.pageYOffset instead of document.body.scrollTop it should work.

You can use

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : 
(document.documentElement || document.body.parentNode || 
document.body).scrollTop;

as described in Detecting by how much user has scrolled.

answered Dec 05 '18 at 00:50

Avocado

871
6
23

Not sure if I understood what you told me. I've applied it all: Changed img var to image to match the request at the bottom part of the code. Closed Parenthesis at the end, changed scrollDown var = window.pageYOffset still not working:( http://jsfiddle.net/h142zed7/5/ @avocado – user2875178 Dec 05 '18 at 01:01
@user2875178 see https://jsbin.com/defusexike/1/edit?html,css,js,output (click `run with js` button in top right of output box before scrolling) – Avocado Dec 05 '18 at 01:12

Change img source each 20 pixels

2 Answers2