Day 13 of #javascript30 is a how to get those swishy images come fly in from the sides of the page.
Like Wes, I am not a big fan of animations that do this, but I still get requests for stuff like this from time to time. So I guess it is good to know.
In the excercise, a function is called through a debounce function on scroll. I have used a function like that in the past with underscore.js and it is a really good idea if you don't want to slam the browser with stuff on scroll.
window.scrollY
The window.scrollY property gives you the number of pixels that has been scrolled down. I like to think it of it as "number of pixels that i have scrolled out of view from the top". Note that it may or may not be an integer. Modern browsers will give subpixel values.
HTMLElement.offsetTop
The HTMLElement.offsetTop property will give you the number of pixels from the element you are on to the closest parent element that is relatively positioned. This is a little tricky and it really is just easiest to console.log the value and see for yourself before you start doing math.
Math with the two properties could be like the example below, where we find the position on the page of the middle of an element.
const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2;