Since browsers that don't recognize fixed positioning are now rare (IE 6 and less). You could change position absolute to position fixed and eliminate the consideration of the page's scroll state in determining where the images should be at any given moment. Yep, seems to work:
John, I've changed the original "absolute" to "fixed" but that didn't work.
I changed this -
To this -document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
Is there something else I have to change?document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');
Hmm, it still isn't working like the demo page John. Will using CSS (to automatically resize the images) affect this?
Oops, never mind. It's working
John, I've just realized that the leaves kinda disappear as they get to the bottom of the screen, they don't fall right off the screen like before. Do you know why?
I assume this is because the space for the animation is limited to the size of the window. It should be possible to adjust this so it is like the top, but that would require changing the math just a bit. John should be able to answer this better than me, but at least I can, for the moment, clarify why that isn't especially unexpected. The only problem might be keeping the scrolling as-is rather than having the window resize every time they go below the space available; browsers might not like allowing them to slide off the page, rather than extending the scrollable region.
Thanks Daniel! It's not much of an issue and coming to think of it, I think it's fine how it is.