My homepage starts at the top with a background image that’s designed to be behind the Navbar, too. So the Navbar has transparent background.
However, when I start scrolling down, the Navbar should have white background, because other parts of the page (like text) are not meant to be background to the Navbar.
I tried accomplishing this with page scroll interaction but failed. I assume I should actually use animation triggered on the background image, and change the Navbar background color to white when the image starts scrolling (and change it back to transparent when the image scrolls back to the top). But I couldn’t understand how to do it.
This is the link I copied from WEBflow:
//preview./preview/rollsoft?utm_medium=preview_link&utm_source=designer&utm_content=rollsoft&preview=01b2b109966c8a9eba69cdc629522e81&mode=preview
As I’m a complete newbie, I attach a picture with how I got this link:
You can use “scroll into view” interaction that would be set up on a div that would include everything but the hero section where you want your navbar to be transparent. Then you would set up the interaction in such a way that when the div that would include everything but the hero is in view your navbar would get that white background. Once the all-inclusive div is out of view your navbar background would become transparent again.
Thanks!
But I also need it when the image in the hero (top) section scrolls down.
The Navbar should be transparent only when this image is totally visible (completely scrolled up).
So I guess the interaction should somehow be triggered on this image, I just don’t know how.
Sorry for the delay, I tried playing with it but still it’s not perfected. The point is that at the minute the background image in the top hero section starts scrolling, I need the navbar to have white background (and to restore it to transparent once the image scrolls back to it’s top position).
I created a scroll in/out of view animation on the image and it’s almost working, however the navbar becomes transparent only when the image is completely out of view, and not the minute I start scrolling. I think you can see it in the shared project.
