Is there a way to automaticaly invert a fixed object color when scrolling onto a diffrent color background.
lets say the fixed object is white and the background in the first sector is black. however the background in the second sector is also white which makes the fixed object invisible. is there a way for the fixed object to turn black while on the second sector?
1 Like
Hi Yofiel,
You mean like this: http://broplayground.webflow.io/invert-color-of-fixed-object?
Yes, something like that, did that with a scroll interaction?
And what if its a long bar and half of it is on the black and half on the white. Is there a way to change only the half that is on the white while its on it to black?
Ok, here is Read-Only link (page Invert color of fixed object): https://preview.webflow.com/preview/broplayground?preview=40af429e66874b74d9b8b7eef49c2ac1
Write, if you do not understand something 
mm… its not exacly what I mean.
here’s an example but its made in CSS - I dont know how to code CSS (Yet…) so is there a way to apply that effect in webflow? or a way to embed it somehow as copy paste code into an HTML embed.
https://cdn.css-tricks.com/wp-content/uploads/2015/10/xoxo.jpg
There used «mix-blend-mode:». You may do this effect with custom HTML embed code.
This is a variant of mixing colors, which is not suitable if you want to specify specific values. For example, that on a blue background the element was red, and on green blue. More info here: mix-blend-mode | CSS-Tricks - CSS-Tricks
Examples are also available from the links above.
My site will be mostly black white and grey, I wont need anything spacific.
In order for an object to do the blend I need to place him inside an html embed and give the html embed a code like that:
«mix-blend-mode:»
Did I got that right?
What is the default color of the element that will change color?
The default of the fixed object will be white and the first section black
Try like that: mix-blend-mode: difference;
http://broplayground.webflow.io/invert-color-of-fixed-object
https://preview.webflow.com/preview/broplayground?preview=40af429e66874b74d9b8b7eef49c2ac1
1 Like
Yes! exacly that.
how can I make it affect something that isnt just a circle. for example a menu or a divblock?
I want the entire navmenu to be inverted.
here’s the site:
https://preview.webflow.com/preview/ysites?preview=81a4fe743386bf17b9009f299e0596e7
the circle with the + sign on the top left is the nav menu I want to invert
I added the code to the Head Code in the settings and changed the class name to my own class name and it worked!
thank you bro!
1 Like
The Webflow link is not working.
Can you please post the link again or the custom code which you’ve added to the head tag?
Thank you!
This was wonderful. Exactly the effect I wanted to use but I’m unable to find a way to use it for text. Essentially I want my hamburger menu icon and some text along side it to have this effect. Is there a way in Webflow to do it?
Did you add any anything else other than bro-design’s embed code, because it doesn’t seem to work for me even after adding to the head code and changing the class namer to my class.
Hey @Sagar_Vijay. Can you show Read Only link of your project?
Here you go @bro-design Thanks for your help 
And the published site:
https://sagarvijay.webflow.io
In its current state I haven’t put the hamburger icon as yet but will put it later. However I was trying to achieve the inverted colour effect on the name “Sagar Vijay” on the top right (Class name is: name-text)
1 Like
Not working unfortunately @bro-design
Logically its correct but not sure why its refusing to work for me 