Streaming live at 10am (PST)

Text color change depending on background

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

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

@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

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.

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

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

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

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