javascript - Morphing content based on window part focus -

What I'm trying to achieve is basically a code, which is based on the current time The window seen in Scenario: - Actual page height: 2000px - actual screen height (PC, laptop, whatever): 800px - 1 image of 600px - 3 div or virtual boxes (just to prove that i do

Workflow

When you open the page, you will see the first part of the page with the image filled in the first device. What do I need and want to achieve while scrolling the page, and the focus will be on the second div (or the image simply gets out of focus - you can not see it anymore), the image will move forward (disappeared from The first box) and the second one, which is currently visible.

This idea may seem a lot easier but I'm not a Javascript lover. Ideally, the answer should include a way to load javascript instead of that image.

The way you use the word focus may be confusing because the focus is a JS event. You need to get acquainted with what happens after the element is clicked. Here is the same thread in Stack Overflow which you want to read