Here is what I want to do.
a. The upper half of the screen (50vh) will have scrolling text with h2 titles for each p paragraph.
b. The bottom half of the screen (50vh) will have a mask.
c. Behind both is a large jpg of a motor vehicle with the body off to see its features.
d. When the vehicle feature’s title slides into view in the top panel, I want the image to move so the feature in question is centered in the mask (rest of image is grayed out).
e. It must be responsive. calc() might come in handy to set the absolutely positioned numbers.
I think I need:
- How to detect the title as it scrolls into view.
- How to detect the viewport height and width so all dimensions in the code are responsive web design.
- How to move the correct part of the image into view under the mask.
I can find the top two by browser searches. I don’t see how #3 is done. It’s going to be very interesting to piece all these together and make it work!
At present, the mask is a png with background-cover to keep it filling the bottom div. The top and bottom panel divs are enclosed by a div that is absolutely positioned with a z-index of 100. The vehicle image is outside of these divs and sits under them.
How would I go about #3?