Move image based on div scrolling into view

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:

  1. How to detect the title as it scrolls into view.
  2. How to detect the viewport height and width so all dimensions in the code are responsive web design.
  3. 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?

Fiddle: https://jsfiddle.net/websteve/7nsgyrpd/

I suspect you will need javascript to move elements in relation to scroll.

I still can’t picture the result you want despite your good attempt at explaining? :slight_smile:

I don’t see how your fiddle is a usable design as it looks weird with the top scrolling and the bottom faded out?

Maybe a mock up of how the final result should look would help.

This old pen may help you with how to make things happen when they scroll into a prescribed area.

https://codepen.io/paulobrien/full/EjwdeG/

(You will need to be in ‘full page view’ to see the effect.)

Agreed. I’m sure I’ll need to get the height and width of the screen as well as the center of the circle before I can move the image xy pixel to the center of the circle.

Hi Paul,
I don’t understand the Codepen (I looked at it at full screen width). I just shows a bunch of Testing circles scrolling up.

My idea is that as the user scrolls through the text to read it, he can see the car’s feature in the bottom half. When the next title scrolls into view, the car in the lower panel slides to reveal the title’s feature. I hope that is clear. Each title’s appearance will move the car so the feature is positioned within the circle mask center. I have the math worked out for the center of the circle. Just not sure about getting the pixel center of the feature into that circle center. I know I can find the xy coordinates of the feature in Photoshop. I need to figure out how to code the movement of the same image over and over.

I tried impress.js, but it is simply weird and I’ll have to give it up.

As the circles scroll up to the middle area they no longer become transparent which was basically the effect you were asking about. They reach a prescribed position (basically central) and then a class is applied to them to animate the opacity etc. When they scroll away the class is removed.

Where does the car slide to exactly? Does it slide into the top panel? I don’t understand the connection of what goes where.

In the end you will basically do what my codepen demo does and detect when an element is in a certain area and then apply your animations to the elements concerned and put them where you wanted them.

If you could show the starting example and perhaps a finished example (hard coded to show the effect) then all you have left to do is code the animations between the two states.

Her’s a very rough codepen of what I think you are asking for:

https://codepen.io/paulobrien/full/rzoNRB/

(View at ‘full page’ to see best effect (i.e. open pen in codepen by clicking the ‘edit on codepen’ link and then click the ‘change view’ button in top right corner and select ‘Full Page’)).

Once on the page slowly scroll the top div and as the title comes into view a class is added to the title and to the body and the background image changes position so that a different part of the image is highlighted in the round mask area. (You will have to click refresh if you want to see it again as I have only partially coded this for proof of concept.)

I have only applied the simple logic of scrolling up and of course the reverse would need to occur if you scrolled down. You would also need to use 'throttling’ so as not to slow the page down too much. The JS is written with jquery help and my JS is very basic so you would need to re-write those routines more efficiently and take care of entering and leaving the scroll area properly for both up and down scrolling.

Obviously you still have to work out where exactly the image will scroll to and I guess that you cannot have that image stretching to fit the whole screen because that would mean you could never move it. You probably want to just start with a centred image and then just move it about to show the part you want when scrolled.

You may also need to make the page ‘adaptive’ rather than ‘responsive’ so that you can use media queries to control the positioning of the image more precisely (i.e. adaptive sites change at breakpoints rather than continuously changing like responsive sites).

Hopefully that is something like what you were after and may serve as a starting point if you require help in the JS forum for coding it properly:)

1 Like

That is amazing! Exactly what I am looking for. I’ll delve into the code and massage it so it works closer to the way I envision it. This is a great first step!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.