Text move out from behind image as it gets smaller - parallax/ sticky elements issue

I’ve got a cut out building image and two separate text divs either side which I want to come out from behind the image as the user scrolls. This is how far I’ve got:

ezgif.com-gif-maker (8)

My main issues are:

  1. I don’t know how to get the text to sit behind the image. When I try add a Z index of -1 to the text divs they just seem to disappear.
  2. I want the image at first to take up most of the width of the screen, but I don’t know how to overlap the elements to do this.
  3. It would be cool if once the image gets smaller, it was sticky so the text continued to move outwards as the user scrolls.

Here are some images to show what I mean, the first being pre-scroll and second being post-scroll:

I hope I’ve explained that well enough, any help would be greatly appreciated!

Here is my public share link: [LINK][1]

Try to set z=0 for text and z=1 for image.

Set image width to 100vw. In order to overlap elements set their position to absolute.

It’s looking a lot closer to how I want it to look already, thank you!

The only other thing I want to work on is the section being sticky as the user scrolls through this interaction. So when they’re scrolling to reveal the text it stays on that section, and when the text has been revealed they can then scroll onto the next section.

I’ve done a lot of research into using sticky position but I can’t quite figure out how to apply it to my project.

ezgif.com-gif-maker (9)

1 Like