Invert Text over dark background

Ask the community
,
1

Hi guys, I just wanted to ask if its possible to invert my fixed menu text color when I scroll down and it intersects with an dark background or picture. I made an example on how it should look like in the end
thanks so much!

2

Hi :raised_hand_with_fingers_splayed:

This cannot be achieved using the regular text element, you can create a custom element with a module on GitHub .

3

hey :slight_smile: thanks for your answer! Ok that looks like black magic coding haha

4

Indeed it is, youā€™re welcome :blush:

5

@ahmadnasriya Hi, Iā€™m new to coding on Wix. How do I go about adding this code to my six site, do I just copy and paste it in Dev Mode or do I need to do more?

6

Iā€™m also struggling with this, I tried copy pasting the java code into the ā€˜masterPage.jsā€™ but I donā€™t know how to tell the code what text element to use. I know nothing about coding :confused:

7

Hello. Is there any solution to this as I also am requiring it.

Thank You

8

Hi Ahmad,
I also am having issues as I know nothing about code. How do we implement this into our wix element?
Thank You!

9

I also want the answer for this. Can anyone explain step by step?
My hearder is a svg logo file, a text box and a wix menu.

10

This is probably using a blend mode of some type - youā€™ll likely want to use some CSS in Wix Studio.

Itā€™d probably look something similar to:

.rich-text__text {
   color: white; /* Set the initial text color to white */
    mix-blend-mode: difference; /* Use difference blend mode */
}

The result would like like the following:
Screenshot 2024-07-23 at 16.27.42

And you can learn more about using CSS here - Studio Editor: About CSS Editing | Help Center | Wix.com

mix-blend-mode: difference works by inverting the background color where the text is placed, resulting in the text color dynamically adjusting based on the background. On light backgrounds, the text will appear darker (closer to black), and on dark backgrounds, it will appear lighter (closer to white).

Itā€™s also worth checking against different colours.

I also hear there might be some features coming up thatā€™ll assist with this :wink:

1 Like
11

Okay thanks! but where am I putting this code?

Into velo code? embed? Wix IDE? html, css, global.css, javescript, developer mode, ā€œcodeā€, iFrame, embed site, custom element, masterpage.sj, css classes ???

I hope the new feature + an easier way to manoeuvre code is around the corner asap! :see_no_evil: Im drowning in confusion atm

12

This would be put in as a custom css class. This link will help learn more

1 Like
13

This explained a lot! Thanks!
I guess the classes does not support blend-mode for pinned components just yet?
Do you guys have a release date for this feature?