Streaming live at 10am (PST)

Changing color based on background

Hi favorite community,

I am looking for a way to control the color of my brand/ logo based on the background or based on a mask.

Example: http://www.sketchin.ch/en/

Do you know a way to achieve this effect natively in webflow?

Thank you!

Seems like what’s happening there is some z-index trickery but I’m not sure. Seems like there’s two copies of the left sidebar - one with color and black text and one with white logo and white text and they overlap the different sections. Not sure how it’s done exactly though.

It uses a deprecated technique called Clip and uses two menus on a scroll interaction. It toggles a “block” for the light menu variant which is “display:none” until you reach the anchor. The Clip holds the other menu in place.

I’d say you could easily replicate such a functionality with the hover-scroll, effect other element, and change not the whole menu, but just the icon. Seems far less invasive.

See example 1 or 2 here.

Most important: don’t use a transition time, which is default 500ms.

Thank you guys for your answers. I think, I got it:

https://webflow.com/design/limits?preview=5657594a7c868824cae152e4cfb0013f

This works without js/ scroll triggers:

Logo bright: z-index 100
Background dark: z-index 50
Logo dark: z-index 10
Background bright: z-index 1

The Section, that display the alternative logo is set do overflow hidden and contains copy of the menu with the alternative logo.

Keep up the good work!

Damn, I love webflow :smiley:

Don’t mind the button, I am testing a version, that controls this effect using the native triggers.