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) of this now found here - weareaeroplane.com (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!