Dynamicaly changing logo colour

Design help Animations & Interactions
1

Hi all,

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.

Thanks in advance!
Olivier

The read only link
Live website

2

Hi Olivier,

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/

https://preview.webflow.com/preview/logo-color-change?utm_medium=preview_link&utm_source=designer&utm_content=logo-color-change&preview=2ae0dfc387f59e0ad909373d6062a382&mode=preview

2 Likes
3

Hi Avivtech,

Thanks for having a go at it! It looks exactly like what I was after.
I’ll try implement it and get back to you.

1 Like
4

Hi @avivtech,

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.

5

I don’t think limiting the color is possible, but there are other mix-blend-modes.

6

Thats what I thought and I looked at those.
The difference blend mode ended up being the best one.

Thanks again for you help!

1 Like
9

This just helped me a lot! Specially when you say " SVG Directly over the colored element" that saved my day.

Thanks @avivtech

1 Like