Text color change depending on background

Design help Animations & Interactions
1

Hi Everyone!

Been trying to look for this effect all over but couldn’t find anything unfortunately.

Does anyone know how to change the text color depending its background? For example, I have a fixed text element that is originally white color text - when scrolled over white background the text will clip and become black and vice versa. I’m not looking for a complete text colour change but a clipping.

This is the effect I’m trying to achieve:

(The email us text part on the left hand side. If you scroll to a black background you’ll be able to see the effect)

Hope someone can help - thanks in advance!

1 Like
2

Hope someone answers this question too. I’m wondering about it as well.

3

@PixelGeek @vincent Any Ideas on the above?

(I see you both comment/solve answers regularly, so giving it a shot here by tagging you guys)

Thanks

4

Your example has it easy, it’s only using black and white sections, with black and white text and arrow. So they’re just using a CSS blend mode.

image
image897×470 122 KB

Use this custom code inside of an Embed component anywhere in the page:

.class-of-your-element {mix-blend-mode: difference;}

1 Like
5

And boom there we have it! Really appreciate it Vincent thanks :smiley:

Just a note, for others reading this, you have to apply the custom code to the Heading/Elements rather than its container for it to work.

1 Like
6

Great that it works! It’s on my radar to make a template with the same effect but without using blend modes, rather several elements and Interactions, so that you can use all the colors of bg and elements you want, but I haven’t found a really simple and solid way to do it yet.

1 Like
7

Hey @vincent,
I have the same goal as @Jeril_Harrison and want to create a text that blends in with the background, also white and black. Unfortunately the solution of adding the Embed element and entering your code with the name of my class doesn’t do the job.

All that happens is that the code I enter

.hero-full-name {mix-blend-mode: difference;}

is displayed as normal text on my website. As if I just added some text. The textfield “hero-full-name” does not change its behavior.

blend mode
blend mode935×475 41.1 KB

Do you have any idea why this could be the case? Am I totally stupid and miss something obvious out?

Thanks in advance for your time and any help.

-Niklas

9

Hi, dont know if its sill relevant, but you need to have

< style>

.hero-full-name {mix-blend-mode: difference;}

< /style>

in your document to make it behave like a style. I added extra space in the bracket - otherwise it wont show it.

10

Thanks for the answer @martinmarus.
Found out about it myself a couple of days after my reply and moved on - forgot to put an update in here :smiley:
Your strategy was the one working for me too :+1:

11

Hi Vincent,

I tried implementing this CSS code below on my site, but without success.

.Nav_Buttons {mix-blend-mode: difference;}

Is there something I’m missing from your diagram that should be included to get white text on a dark background and black text on a light background?

Thanks!

12

Any advice on how to keep text only in black and white when blending over a color (eg difference blend mode appears orange on a blue background)

13

This is another way, different from blending mode, using interactions: