Databases
StackOverflow2013
Postsdbo
POCSS3 transition: typewriting html <p> sequentially
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 transition: typewriting html <p> sequentially
    text
    copied!<p>I have got a problem animating an opacity transition on multiple paragraphs to simulate sequential typewriting. In my page I have three "paragraphs" elements which contains text. I would like to visualize them sequentially: the first, char by char, then the second, char by char, then the third, char by char. I noticed the code works only for the n-1 paragraphs... the last is always shown immediately. So my trick has been to include a "dummy" void as the last paragraph... but I don't like it. Is there a way to solve the problem in a more elegant way? My code is as follow:</p> <ol> <li><p>CSS:</p> <pre><code>span.typewrite { opacity: 0; -webkit-transition-property: opacity; -webkit-transition-duration: 0s; -webkit-transition-timing-function: linear; } </code></pre></li> <li><p>javascript:</p> <pre><code> window.onload = function() { var setTypeWrite = function(arr) { var p, txt, span, t = 0; for (var a = 0; a &lt; arr.length; a++) { p = document.querySelector(arr[a]); txt = p.innerText; p.innerText = ""; for (var i = 0; i &lt; txt.length; i ++) { span = document.createElement("span"); span.className = "typewrite"; span.appendChild(document.createTextNode(txt.substr(i, 1))); span.style["-webkit-transition-delay"] = parseFloat(t * 0.15).toString() + "s"; p.appendChild(span); t++; } } }; var startTypeWrite = function(arr) { var spans; for (var i = 0; i &lt; arr.length; i++) { spans = document.querySelectorAll(arr[i]); for (var s = 0; s &lt; spans.length; s++) { spans[s].style.opacity = "1"; } } }; setTypeWrite(["#text1", "#text2", "#text3", "#dummy"]); startTypeWrite(["#text1 span.typewrite", "#text2 span.typewrite", "#text3 span.typewrite", "#dummy"]); }; </code></pre></li> <li><p>HTML body:</p> <pre><code>&lt;p id="text1"&gt;text one...&lt;/p&gt; &lt;p id="text2"&gt;text two...&lt;/p&gt; &lt;p id="text3"&gt;text three&lt;/p&gt; &lt;p id="dummy"&gt;&lt;/p&gt; </code></pre></li> </ol>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload