Invert text color when elements overlap
Hey guys! I was trying to re-create the "inversion" effect with the cursor and text that I saw here, and it got me thinking a bit: https://drigmatic.com/
This site uses
mix-blend-mode: difference and setting the color of the cursor to white to get this effect, so it seems it only really works with the specific colors they picked. I've seen a few other examples of this effect in action as well, but they mainly stick to black and white due to the nature of blend modes. In a lot of cases, you won't have the perfect set of complimentary colors, or be working in exclusively black and white.
Is there a way to have more control over blend modes so you can control which color gets displayed when elements overlap? For example, if you wanted to keep the background and the overlapped text colors the same, but have the default text and cursor colors be red, you would end up with some really wonky colors on the cursor and the overlapped text due to the blend modes.
Here's a codepen with a simple recreation of it:
https://codepen.io/Therason/pen/XWydYMvDRIGMATIC - Creative Marketing Agency in Esports and Gaming
DRIGMATIC - Creative Marketing Agency in Esports and Gaming
DRIGMATIC - Declare yourself to the entire gaming audience! We are a creative marketing agency in the gaming and esports with our own 7,000,000 subscribers in social medias and 10 years of experience. We generate concepts, organize integrated campaigns, hold events, develop visual identity, write scripts, film movies and produce online broadcast...
3 Replies
I think a possible solution for this would be to use a
mask-image to reveal a duplicated version of the text that has a different color, but I imagine that would be very tedious to work with for larger projects 😔 Gonna try and spin up a codepen with itGot it to work with
mask-image, my code is pretty janky 0.o
Still, I wonder if there is a better solution, since with this I had to duplicate the <h1> tag within the mask image. Since this example is pretty simple, it isn't a problem, but with a more complex page, I'd imagine it would be pretty tedious to get everything lined up perfectly.
Here's a new pen with the effect: https://codepen.io/Therason/pen/XWydQeYThis isn't an answer but I updated an old codepen of mine to add a (slightly modified) version of your JavaScript. This doesn't require you to duplicate the text so is possibly slightly closer to what you want to achieve.
As I say, it isn't a solution but just something to add to your pile of experiments.https://codepen.io/cbolson/pen/PoxNvJO
(Note - as is this doesn't work on iOS)