The background colour of my hero section is currently a dark grey, however I want to try adding a bg image behind the dark grey and create a scrolling interaction where the opacity of the dark grey reduces to 0 and the bg image below is revealed. I only want the scroll to move down to the next section after the bg image has been made fully visible though.
I’ve tried many tutorials but none seem to show exactly what I’m looking to do. Maybe you can help me once again, @PeterDimitrov? (I’m learning a lot from you)
Just so I understand what you’re trying to achieve, do you want to have a scrolling effect but no objects on the page actually move up/down?
If this is right, you’ll still need to create that extra “scrolling” space below with a blank div set to specific height (pixels, vh units) and your interactive and page elements will be set to “fixed”.
Right now I’m not seeing your background image or the scroll interaction so not sure. My guess is that you want the solid color to transform into the image. If this is right, I’d layer the background image using z-index and then set the scroll interaction to transform the color div from 100% opacity to 0% opacity
edit: sorry, I reread your post again and I think I know what you’re saying. You should be able to achieve (without extra coding) by using a “blank” div as the trigger element for the fade-out. And then I would use a scrolling (non-fixed) div for the next section on a higher z-index that scrolls over your fixed elements. Not unlike what I’m doing on the top section of this site: https://828design2.webflow.io/
I’ve had a look for some examples and this website (https://www.reine-lungau.at/) is essentially the same as what I’m trying to achieve. So with one scroll/swipe of the mouse pad, the bg image changes to day light but doesn’t move down the page, and on the second scroll it moves down to the second section (which I’ve not yet created in my own project).
Also, I’ve given the ‘bg’ image a z index of -1 which I think is why you probably can’t see it?
I believe the proper way to do it is by using a “sticky” property but it’s a new feature I haven’t used yet. You can learn more here: https://webflow.com/feature/position-sticky
I did a quick interaction version on my sample page though if you want to check it out. Basically all I’ve done is create and fixed overlay for the nav, and then applied a scroll interaction on the div called “regular old content”. I’m telling the Nav to move up as the “regular old content div” moves up into the viewport.
Thanks for creating that scroll test - that’s actually almost perfect for me, how would I make the green reach 0% opacity quicker though? Like almost immediately actually.
You can control how quickly it reaches 0% opacity by changing the endpoint of the scroll interaction. Check out the screen grab.
I moved it from ending the transition when 100% of the trigger element is visible in the viewport to 80% in viewport. You can set it to 50% for quicker, etc…
edit: You can also change the height of the trigger element. I had the trigger element height set to 100vh. Changed it to 50vh. Makes the color fade out quicker AND makes your menu fly out quicker. I just republished it if you care to see the new speed.
@Port_of_Folio my links are not moving upwards when the content div moves into the viewport and I cant work out why because from the looks of it I have made everything the same as how you have in your example. Confused. Mind taking a look?
Hey @Port_of_Folio
I’m trying to achieve the exact same thing you made on your scrolltest, or something that looks kinda like that webflow hero section: Create an animated text overlay on an image on hover | Webflow Blog
The overlay is supposed to fade away as we scroll down but having jumped into the Webflow world only 2 weeks ago, I got lost in the process. Would you maybe care to explain a bit more in details how you got there?
Thanks a lot for your help!
