Streaming live at 10am (PST)

Invert color of fixed object


#1

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?


#2

Hi Yofiel,

You mean like this: http://broplayground.webflow.io/invert-color-of-fixed-object?


#3

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?


#4

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 :v:️:blush:


#5

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.



#6

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: https://css-tricks.com/almanac/properties/m/mix-blend-mode/

Examples are also available from the links above.


#7

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?


#8

What is the default color of the element that will change color?


#9

The default of the fixed object will be white and the first section black


#10

Try like that: mix-blend-mode: difference;
http://broplayground.webflow.io/invert-color-of-fixed-object
https://preview.webflow.com/preview/broplayground?preview=40af429e66874b74d9b8b7eef49c2ac1


#11

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


#12

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!