How to contrast font with the animated block objects?

Question

I want to change the color of the text when a colored object is overlapped with my text. The problem is - those objects are not an animated background, but individual div objects that have the "fall" animation. I want to change Lorem's color from black to white when it overlaps a purple circle

I want to change Lorem's color from black to white when it overlaps a purple circle

My animation.

@keyframes fall { 

    0%{top:-40%;}

    20%{top:0;}

    80%{top:85%;}

    100%{top:100%;}
}

maybe some collision detection: https://stackoverflow.com/questions/5720837/how-to-detect-elements-overlapping-overlaying-using-javascript — benzkji, May 20 '20 at 12:37

score 0 · Accepted Answer · answered May 20 '20 at 11:46

0

You can use a blend mode to make the color of the text to be a combination between the own color and the background. It's not White, but it is clearly visible

.container {
    height: 100px;
    background-image: linear-gradient(white 50%, purple 51%);
}

span {
    font-size: 40px;
    color: white;
    margin: 10px;
    mix-blend-mode: difference;
}

<div class="container">
<span>TEST</span>
<br>
<span>TEST</span>
</div>

answered May 20 '20 at 11:46

vals

61,425
11
89
138

Yes, it works, thanks! but is there any way to make text appear black on the white background and white on the purple background in this case? – Eaven May 20 '20 at 14:18
I don't think that "white" is possible. You can get different colors, playing with the different blend modes, but Ican't think of a combination that gives white/black – vals May 20 '20 at 14:40

score 0 · Answer 2 · edited May 20 '20 at 12:14

There might be a workaround to do this. We can sync the color of text with your "fall" animation. Please try to follow steps and see if it would work for you or not?

lets consider your text is in a span.
write a keyframe same as "fall" and change the color of text at the same time.

For example, please see below code

    span {
      animation: change-text-color 1s infinite;
    }

    @keyframes change-text-color {
       0%{color: red;}
       20%{color: blue;}
       80%{color: blue;}
       100%{color: blue;}
    }

You need to make some changes according to your requirement

How to contrast font with the animated block objects?

2 Answers2