How to make line-by-line text appearance?

Question

I need to make line-by-line text appearance I think I have to split the text into lines and wrap each line in span.

Before:

<p>qwerty321<br>
qwerty321<br>
qwerty321<br></p>

After:

<p><span>qwerty321<br></span>
<span>qwerty321<br></span>
<span>qwerty321<br></span></p>

I think it should be like this. But I don't know how to do this. Vanilla JS

Edit: Sorry but I wrote the problem incorrectly. Look, I have some text(text in the question is just example) and I have to show it line-by-line while scrolling. That's the problem. And I don't think that I can use CSS only

What does that link have to do with line by line? That page has a bunch of different things on it. — StackSlave, Oct 07 '21 at 02:11
So you're wanting to trigger the animation once the user scrolls to a certain point on the page? — dave, Oct 07 '21 at 02:20
@dave Yess, but I have to add many points and when user scrolls to a certain point, this or that line of text should appear. For example, there are points on 150px, 300px and 450px. If user scrolled to 150px then the first line should appear. If scrolled to 300px - 2nd, if to 450px - 3rd. — Gg Wp, Oct 07 '21 at 02:26
Have a look at [this example](https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671). You'll want to use Javascript to detect if an element is visible in the viewport, then once it is add a class to it with a CSS animation to fade it in. — dave, Oct 07 '21 at 02:32
@dave I understand how to show all the text when you scroll. I don't understand the other. How to show a single line when scrolling — Gg Wp, Oct 07 '21 at 02:44
So you need the rendered lines? Or do you really just want to break on `
`? For instance this very comment spans on multiple lines, even though there is no `
` to make a hard-break. If that's the case, have a look at https://stackoverflow.com/questions/55604798/find-rendered-line-breaks-with-javascript/55605049#55605049 from there doing the break into elements should be trivial. — Kaiido, Oct 07 '21 at 03:26

dave · Answer 1 · 2021-10-07T03:16:14.627

1

You don't have to use Javascript for this. You can do it with CSS using animation, opacity and by selecting each element with the nth-child selector:

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

.fade {
  animation: fadeIn .5s forwards;
  opacity: 0;
}

.fade:nth-child(1) {
  animation-delay: .5s;
}

.fade:nth-child(2) {
  animation-delay: 1s;
}

.fade:nth-child(3) {
  animation-delay: 1.5s;
}

<div class="fade">qwerty321</div>
<div class="fade">qwerty321</div>
<div class="fade">qwerty321</div>

edited Oct 07 '21 at 03:16

answered Oct 07 '21 at 02:11

dave

2,750
1
14
22

1

`
` is block-level, so it should be outside of the inline span. I would just use block-level `
` instead of `` with no `
`, since block-level Elements break lines automatically and have a semantic value.
– StackSlave Oct 07 '21 at 02:15
Moving the
outside modified the index of your elements. – Kaiido Oct 07 '21 at 03:13
Thanks, good catch! I've updated it as per @StackSlave's comments – dave Oct 07 '21 at 03:17

score 0 · Answer 2 · answered Oct 07 '21 at 03:05

You can make a wrapper function that creates a span and adds the elements to it.

var wrap2 = function (node1, node2) {
    const wrapper = document.createElement('span');
    node1.parentNode.appendChild(wrapper);
    wrapper.appendChild(node1);
    wrapper.appendChild(node2);
};

var p = document.querySelector("p");
var nodes = Array.from(p.childNodes);
for (var i=0; i<nodes.length; i+=2) {
  wrap2(nodes[i], nodes[i+1]);
}

span { background-color: yellow; }

<p>a1<br>
a2<br>
a3<br></p>

How to make line-by-line text appearance?

2 Answers2