What I'm trying to achieve is basically have a code that will morph ( move around the page ) based on the part of the window which is currently viewed.

Scenario : - actual page height : 2000px - actual screen height( pc, laptop whatever ) : 800px - 1 image of 600px - 3 div's or virtual boxes ( just to prove what I want to do )

Workflow

When you open the page, you'd see the first part of the page with the image loaded in the first div. What I want and need to achieve is when scrolling the page, and the focus would be on the second div ( or the image simply gets out of focus - you can't see it no more ), the image would move ( disappear from the first box ) and appear in the second one, which is currently visible.

The idea might seem pretty easy but I'm not Javascript savvy. Ideally, the answer should include a way to load a Javascript instead of that image.