▼
Streaming live at 10am (PST)

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

Design help Custom code
#1

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

#2

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

#3

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

#4

Some screenshots.

Works: on desktop, all good

Screen Shot 2021-01-03 at 10.40.47 pm
Screen Shot 2021-01-03 at 10.40.47 pm2450×1580 369 KB

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

Screen Shot 2021-01-03 at 10.41.02 pm
Screen Shot 2021-01-03 at 10.41.02 pm568×934 38.9 KB

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

Screen Shot 2021-01-03 at 10.41.22 pm
Screen Shot 2021-01-03 at 10.41.22 pm564×936 49.2 KB

#5

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.

image
image1123×744 70 KB

Step 2: Add an interaction to an trigger-element (i am using the black text)
image
image1312×622 53.4 KB

Add interaction trigger “scroll into view”.
Step 3: Add the interactions.
image
image1830×859 84.5 KB

3.1: initial state white
image
image232×842 15.8 KB

3.2: the state the element should get after the text is visible.
image
image236×867 18.9 KB

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).
image
image235×856 17.2 KB

Step 5: Just unclick the “Desktop and above” and “Tablet” checkboxes and you should be good to go.
image
image235×834 22.1 KB

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

#6

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!

#7

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!

#8

i dont know the bug since i have no iphone.