How to create a specific parallax effect

Hello,

I am trying to achieve a specific parallax effect as shown on this website: https://belgraviagroup.com/

Basically, when you scroll, the hero image goes up and under it is another div with text revealed. How would I do this?

I know how to create this the other way around: making the hero image position ‘fixed’, then adjusting z values from the section below, so that on scroll the hero image stays in place and the div below it goes over it when scrolling. But somehow I can’t figure out, how to have it the other way around: when scrolling, the hero section goes up and reveals the section below it (see link above)

Would very much appreciate anyones help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Jana90

So the footer is fixed to the screen at the bottom and put behind the other content and the rest of the content is in a wrapper that has a margin at the bottom so it keeps scrolling to reveal the fixed footer.

Hopefully this makes sense if it doesn’t I can make an example.

Sean

Hi @DasSean, thank for your answer! It did work a bit but not 100% what I need. Basically, if you look at the link I posted in my original post, I meant the effect that is on the hero section and how under the hero section the one sentence on white background is revealed. Once that 2nd section is revealed, it sits ‘on top’ of the following (third section - the 4 square images).

If I do it the way you described it, the section that is revealed will disappear behind the 3rd section once the user keeps scrolling. But in the example I posted, the 2nd section stays on top of the following section once it is revealed and does not disappear again.

How would I achieve this?

For a second I didn’t think it was possible but with power of webflow magic I made it work. Here is a share link that is very basic just to show how to do it.

https://preview.webflow.com/preview/seans-fantastic-project-44704a?utm_medium=preview_link&utm_source=dashboard&utm_content=seans-fantastic-project-44704a&preview=5fc3dc851d69fd9f844b45de583a1a3c&mode=preview

Sean