Streaming live at 10am (PST)

Blending modes – getting text to change colour depending on the it's background

Afternoon everyone.

I’ve seen a couple of threads on this, namely here, here and here, and an incredible site here, but I cannot, for the absolute life of me get it to work on my site.

When the site goes to mobile, the columns stack but the nav bar moves from sitting on a white background to a coloured one. When it does this, I need it to blend (I’m thinking difference or multiply) so it turns white.

I’ve tried embedding the custom code in the links, embedding it in the header, but after five/six hours, I cannot work it out. This is my last resort!

I’m hoping that someone here can help me out, and I’d happily send anyone who is able to couple of cups of coffee for your time.

Thanks team.

James

Here is my site Read-Only: Webflow - 1010 Capital

Hi @James_Fazzino,
may you share some screenshots with us? I don´t really know what you mean.
I assume http://1010-capital.webflow.io is your live site?

Regards
Maxi

Hey Maxi,

I included the read-only link above, but yes, that’s it. If you see the ‘About’ and ‘Contact’ links in the nav bar, on the desktop version the text is black as it sits on a white background. When you move to mobile though, the links sit on-top of the image and it’s not that visible so I need them to be white.

Thanks for having a look mate. :slight_smile:

James

Some screenshots.

Works: on desktop, all good

Doesn’t work: when it goes to mobile, the nav links stay black

Mock: how it should look, the text should be white (reversed)

Hi @James_Fazzino,
i have a solution for this. It is a little bit complicated and uses the interactions.
I wont use the css filters because they arent currently supported by all the browsers.
Step 1: Change the Font Color to white on mobile.


Step 2: Add an interaction to an trigger-element (i am using the black text)

Add interaction trigger “scroll into view”.
Step 3: Add the interactions.

3.1: initial state white

3.2: the state the element should get after the text is visible.

Step 4: Add a new animation at “when scrolled out of view”, and just add one text color element with your “nav-link difference” class and the color white (not black as the picture shows).

Step 5: Just unclick the “Desktop and above” and “Tablet” checkboxes and you should be good to go.
If you want you can also set a other element as a trigger. (just add a “scroll into view” interaction trigger and set your animations.

Maxi

You are an absolute legend mate.

I assume I’d apply the same affect to the hover/active states too, as I have an underline on them?

Let me know you’re PayPal details and I’ll send you over a coffee as mentioned for taking the time. Appreciate it!

All good, I have a work around. Thanks again.

One more minor bug (the viewport height not = 100 on Chrome/Safari mobile!!!) and I’ve finished the landing.

Thanks mate!

i dont know the bug since i have no iphone.