Jump to content
Search Community

Text Color Change (blend-mode effect)

pauljohnknight test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Is it possible with Greensock to achieve an effect were as a div slides over some text, the text changes color, but only the text covered by the div changes color.

 

Visual Example:

 

In the Codepen supplied I have a red bar that slides over some text and I would like the text to change to white whenever the red bar slides over it, however, whenever any of the text isn't covered by the red bar, I would like that text to remain black.  I was thinking a blend-mode might do this, but alas it seems not, because there isn't a blend mode that would turn the text from black to white (as far as I can tell).

I'm kind of thinking this isn't possible?  But I thought I would ask here in case.

Kind regards,

Paul

See the Pen JLNJKW by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

  • 1 year later...

@PointC, is there a way to achieve this effect more dynamically? What I mean by that, is say I have a fixed logo on a page and as the user scrolls the background colors change from section to section. So you have a white section, then a black section, then a blue section or something like that and as the background is passing through the fixed position where the logo is, the logo would "detect" what color is behind it (parts of it or all of it) and adjust accordingly, meaning on a dark bg it would reverse to white and on white back to black.

 

I've seen this done before, but I'm not sure what people use for it. I'm guessing that you can set some sort of darkness breakpoint and make a decision to go light or dark based on that.

Link to comment
Share on other sites

Hey all, the above approaches look like nice approaches. ;—)

 

Since I happened to notice the old OP mentioned blend-modes, maybe “mix-blend-mode: difference;” would be applicable for some? You can make that go from white to black and reverse. Except regarding the various still lack of browser support sadly. :—(

https://css-tricks.com/reverse-text-color-mix-blend-mode/

https://caniuse.com/#feat=css-mixblendmode

 

Midnight.js (or others) might be another option for some.

http://aerolab.github.io/midnight.js/

 

You could probably even just use a small function to determine if it needs to be black or white, etc., and conditionally pass that reference into a tween to make a smooth transition between colors across sections on scroll. Here is one example of determining color.

https://stackoverflow.com/a/35970186

 

¯\_(ツ)_/¯

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...