I’m working on a website where the logo moves over different coloured backgrounds, both through scrolling and full bleed sliders. I know how to change the logo colour through interactions, but I would like to have a way that automatically checks the background and inverts the logo colour so it is always visible. Likewise with the menu button.
I have tried to find a way to do it online and and came across different blend mode options but don’t know how to integrate them.
The logo is currently made of an SVG file using custom code and the menu button is made using standard div blocks.
I think that the easiest solution is to use mix-blend-mode with an SVG. The main issue with this method is that you have to place the SVG Directly over the colored element you want to trigger the color change.
Look here: https://logo-color-change.webflow.io/
I have applied your fix and it works really well! Thanks for looking into it!
I’m just wondering if you have any idea about limiting the colours the mix-blend-mode creates to white and dark grey (well #333333)? I doubt you can but still worth asking.