The html the code displays successfully. But, I’d like the three spans to line up on one line. When I removed the line breaks, the text overlaps on top of each other. I’d tried sveral things, like renaming each span, wiithout success.
If you change the html as below, it displays on one line. Is that what you need or am I missing something?
<div class="anim-text-banner">
<span class="anim-text">first text </span>
<br>
<span class="anim-text">second text</span>
<br>
<span class="anim-text">third text </span>
<br>
<span class="anim-text">first text; second text; third text </span>
</div>
The problem with clip is that it only works on absolutely placed elements. If you want in-flow elements then you need to use the newer and slightly more complex clip-path property instead.
Here’s a rough demo.
You can do similar things in css without JS but of course can’t be dynamic as such.
@PaulOB yours still has the <br>'s though. Just looked at both your codes. The text with the dark background is my favorite . Also seen Paul Wilkin’s code, and was trying to find what causes the overlap in his, but couldn’t.
<span class="anim-text">first text </span>
<span class="anim-text">second text</span>
<span class="anim-text">third text </span>
There are no breaks there.
I explained why they overlap. It’s because they are absolutely positioned and occupy the same position.
The old clip property/value only applies to absolutely positioned elements and is the method being used to reveal the text bit by bit. I changed the script to use clip-path instead which applies to non positioned elements also and therefore the flow of the document is maintained.