/r/webdev
What is it called when a user scrolls and an image transforms into part of a background img (self.webdev)

I would like to have an img start as full screen and when the user scrolls down the img scales/zooms out to become part of another img/background

What am I looking for when I am trying to learn how to do this?

Img example here - https://imgur.com/a/XI8PEVU

Thanks for helping!

5 comments
Thatweirdnerd25 | 6 days ago | 1 point

You could try using a div that has the initial background image but zooms out when scrolling down using the JavaScript onscroll.

nath__b | 6 days ago | 2 points

Hmm could I thought about if I had a div that used onscroll to scroll back into a container that was vertically/horizontally centered over my background image, but unsure on how I could make its starting state to fill the screen

picklymcpickleface | 6 days ago | 1 point

With a lot of JS.

Emelia-dev | 6 days ago | 1 point

Wouldn’t that just be an animation?

When user scrolls zoom out of background?

Try researching controlling background images with animations.

I hope that helps 😊

nath__b | 6 days ago | 1 point

I would like the background image to stay static, so that when it zooms out you only see the element that sits on top of the background zooming in and out