Hello people,
I am new to webflow and trying to understand the page scroll interactions. On this site there is a page scroll effect. 1st page is fixed and second page moves up. The 1st page gets darker and when the 2nd site is overlaying the 1st, the navbar changes the color to yellow. How can I do this effect step by step?
Can someone help?
Link: https://www.bigmammagroup.com/en/trattorias/pink-mamma
THANK YOU!
Welcome to the community @redredu!
This is really three separate ideas combined to create this effect:
The hero image is just a section with height of 100vh and a background image set to “Cover” and “Fixed”. This will hold the image in place and make the section itself act as a frame—with all the other website content moving around it:
To make the hero darker, just throw another div into the hero section, give it a height and width of 100%, a background color of black (or whichever color you’d like it to fade to) and set it’s opacity to 0%. Now create a “While scrolling in view” element interaction (based on the hero section) that targets the newly created div, changing the opacity from 0% to 100%. Keep in mind you’ll probably need to adjust the Animation Boundaries:
Lastly for the navigation changes, just create another element interaction on the hero section, but this time choose “Scrolled into view”. Create an animation under the “When scrolled out of view” section that changes the background color of your navigation element with something like a 10-15% offset. As a side note, you’ll want to create a similar interaction (but under the “When scrolled into view” section) that reverses the background color:
I’d recommend starting a project and seeing how far you can get with the directions above—maybe even taking a peek at some of the Interaction lessons, or even the entire Interactions & animations course, in the Webflow University—as it has tons of great (free) content that may answer any initial questions.
If you run into any issues, feel free to reply with your read-only link and I’ll take a closer peek to see if I can help out 
hey @mikeyevin, thank you for the detailed description! I will try it out and let you know how it went =) 
