Text behind animation

HTML & CSS
1

Hello again :slight_smile:

I am really trying to put the <h1> tag behind an animation that I have took from codepen but cannot make it work.
I have tried to make all the combinations with z-index and blend-mode in css.

If I put a background in the svg it seems that it is above the text, but if I want to make it transparent, it seems that it’s items are always behind the <h1>, even if technically they are not.

Very confused with it.

here is the link if someone can understand what’s going on
https://officenter.gr/atomind-home/testanimation/

2

I think that’s just an artifact of the animation as only the one’s in “front” are full opacity . If you change the h1 color, the animation goes over it…
image

2 Likes
3

it’s impossible to make it and keep the text black?

4

I have also tried some variations with mix-blend-mode but with no luck :confused:

5

As Dave said the animations are on top of the text but because they are black and have some opacity you get the illusion of them going behind.

You could lessen the effect by putting a partial background behind the svg.

e.g.

.sec-fractal{
background:rgba(255,255,255,0.4);
}

That will of course make the text appear a bit lighter.

As an aside you should also look into the CSS prefers reduced motion media queries when using uncontrolled animation as it can be a considerable problem for readers with vestibular motion disorders.

3 Likes
6

great thanks!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.