Necesito hacer que el texto aparezca línea por línea. Creo que tengo que dividir el texto en líneas y ajustar cada línea en intervalos.
Antes:
<p>qwerty321<br> qwerty321<br> qwerty321<br></p>Después:
<p><span>qwerty321<br></span> <span>qwerty321<br></span> <span>qwerty321<br></span></p>Creo que debería ser así. Pero no sé cómo hacer esto. Vainilla JS
Editar: Lo siento, pero escribí el problema incorrectamente. Mire, tengo algo de texto (el texto en la pregunta es solo un ejemplo) y tengo que mostrarlo línea por línea mientras me desplazo. Ese es el problema. Y no creo que pueda usar solo CSS
No tienes que usar Javascript para esto. Puedes hacerlo con CSS usando animation , opacity y seleccionando cada elemento con el selector nth-child :
@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>Puede hacer una función contenedora que cree un lapso y le agregue los elementos.
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>