Streaming live at 10am (PST)

Changing color based on background


#1

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!


#2

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.


#3

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.
http://interactions.webflow.com/

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


#4

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


#5

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


#6