Create overlay effect on scroll?

How can I tell all sections below my crimson hero section to to scroll over that section while it appears to stay in place? (this is a one page / anchor nav site)

My hero section is percent based…it scales according to the percentage set for the large type .svg.

I do not code and am a beginner in webflow…so the simplest breakdown would be greatly appreciated.

Thanks!

Read-only link: https://preview.webflow.com/preview/cynple?preview=68f95fc2cdb04c745b4d8c00c7f7a72e5![|690x311](upload://hGXqppAxzXR653iRqJJc0BVJN0C.jpg)

Your link is out. Show us an example of what you want. :slight_smile:

Hey @douglasrpinho,

Thanks for helping!

Here’s my new read-only link: https://preview.webflow.com/preview/cynple?preview=68f95fc2cdb04c745b4d8c00c7f7a72e

Here’s an example of the simple parallax scroll I want to achieve: Parallax.js | Simple Parallax Scrolling Effect with jQuery

Hello @anon55398716

“Simple paralax effect” get archived because of fixed position of background image. It means that background image on that area will never move, while all other parts of site are moving (and section with paralax are moving too, actually). It is how you would see the “content” from moving train window.

For archive same effect on the section that you want, you will have to make all elements inside it - position: fixed. In the same time, you have to make sure all other sections will have z-index higher than fixed content.

Hope I was able to explain.

Regards,
Anna

Hi @sabanna

I understand what you’re saying and this works IF the hero section has a fixed height. I cannot have a fixed height on my hero section so I need the solution for that…

I have my hero section height set to auto so that at any screen size, the padding remains the same. When I set the height, this gets very messy. Can you help figure this out?

Ok.

Two options

First: You can make the background a photo. with the text and everything. use a DIV block and make the background that background image, set it to fix

Second: or you can set the the div block with text and everything to Fixed position under the position are in the control panel.
Then set every section under that to relativ and Z-index: 1

That is what I would have done. I think :smile:

Like that?

Hey @anon55398716 if you set your “Hero div” to fixed position. Then give your hero section 50% padding on top. You’ll get the desired effect. :slight_smile: You’ll need to adjust the top padding accordingly for other mobile break points. But that should take care of everything.

@krubens, @Waldo, @sabanna, @douglasrpinho

I give big thanks to all of you for sharing your knowledge and helping me with this—you all taught me something ! In the end, the percent based .svg in the hero section was the reason why the solutions didn’t work in this case. The answer required some custom code! Eeek. All set to go!

Thanks!

2 Likes

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