Streaming live at 10am (PST)

I want to make a Blur Nav Effect like Apple.com

I already made the Blur/Glass effect to the nav, but I want it to change the background color when it enter in a dark section, just like https://www.apple.com/iphone-11/

I attach photos of the actual code that I have and how it look.

And this is what I want:

WHat happens when you fill your navbar with almost transparent white colour? Like 5% of white

It looks how I want but how I change it just when it enter in a dark section?

Why do you need to change it if it will look dark anyway being almost transparent?

Because it don’t look completely ok as I expected with a white background, and is more atractive to see an animation

Well, there is no native way to make the change to happen exactly at entering the black section (you can only make it to work when scrolling in one direction - you may use “scroll into view” interaction on the dark section and target your navbar changing it bg)

1 Like