Streaming live at 10am (PST)

Image automatically changes text colour

Hi all hope you are well!

simply put: text change to black or white depending on the background image uploaded.

using - http://www.kennethcachia.com/background-check/index.html
and trying here - https://webflow.com/design/background-check-test

My knowledge of js isnt great although i did get this working however it only scans colours not images - https://github.com/jamiebrittain/colourBrightness.js

DETAILS:

Using this - http://www.kennethcachia.com/background-check/index.html
Found here at https://github.com/kennethcachia/Background-Check
JS here - https://github.com/kennethcachia/background-check/blob/master/background-check.js and https://github.com/kennethcachia/background-check/blob/master/background-check.min.js

https://cdn.jsdelivr.net/gh/kennethcachia/background-check@master/background-check.js
https://cdn.jsdelivr.net/gh/kennethcachia/background-check@master/background-check.min.js

Js -

Css -

It does state -

"If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element’s style — you must do so using CSS.

For example, if <p> has the following default style:

p { color: white; }

you can then add the following:

p.background–light { color: black; }

THANKYOU :slightly_smiling_face:


Here is my site Read-Only: https://preview.webflow.com/preview/background-check-test?utm_medium=preview_link&utm_source=designer&utm_content=background-check-test&preview=8e12d25d6051c4616d7a087066e7e2a6&mode=preview

https://background-check-test.webflow.io

Hi @AGH,

Can you explain again, what is it that you want to achieve? Maybe show an example?

Hi, @avivtech Thanks for checking.

So we’ve had to create a manual version (toggle in database changes nav and logo by duplicating and setting conditional format) (logo changes colour for each slide)

But I’m still interested in how this would work automatically using js, as think it’s such a valuable tool for anyone with a logo that go’s over a banner image.

Cheers

Gareth

Maybe using this:
https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

Yes, completely loved this! we set it up and implemented it then realised when a banner is yellow the logo went purple lol. So if it needs to be staying black and white it may need to javascript?

I think that a grayscale filter on the element will be enough.

Good point! will have a go and let you know the outcome, Cheers @avivtech!