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