{"id":663,"date":"2022-08-30T15:05:06","date_gmt":"2022-08-30T15:05:06","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/css3-transition-typewriting-html-p-sequentially-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:05:06","modified_gmt":"2022-08-30T15:05:06","slug":"css3-transition-typewriting-html-p-sequentially-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/css3-transition-typewriting-html-p-sequentially-collection-of-common-programming-errors\/","title":{"rendered":"CSS3 transition: typewriting html &lt;p&gt; sequentially-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li>\n<p>CSS:<\/p>\n<pre><code>span.typewrite {\n       opacity: 0;\n        -webkit-transition-property: opacity;\n        -webkit-transition-duration: 0s;\n        -webkit-transition-timing-function: linear;\n    }\n<\/code><\/pre>\n<\/li>\n<li>\n<p>javascript:<\/p>\n<pre><code>        window.onload = function() {\n\n        var setTypeWrite = function(arr) {\n                var     p, txt, span, t = 0;\n\n            for (var a = 0; a &lt; arr.length; a++) {\n                p = document.querySelector(arr[a]);\n                txt = p.innerText;\n                p.innerText = \"\";\n\n                for (var i = 0; i &lt; txt.length; i ++)\n                {\n                    span = document.createElement(\"span\");\n                    span.className = \"typewrite\";\n                    span.appendChild(document.createTextNode(txt.substr(i, 1)));\n                    span.style[\"-webkit-transition-delay\"] = parseFloat(t * 0.15).toString() + \"s\";\n                    p.appendChild(span);\n                    t++;\n                }\n            }\n        };          \n\n        var startTypeWrite = function(arr) {\n            var spans;\n            for (var i = 0; i &lt; arr.length; i++)\n            {\n                spans = document.querySelectorAll(arr[i]);\n                for (var s = 0; s &lt; spans.length; s++) {\n                    spans[s].style.opacity = \"1\";\n                }\n            }\n        };              \n\n        setTypeWrite([\"#text1\", \"#text2\", \"#text3\", \"#dummy\"]);                         \n        startTypeWrite([\"#text1 span.typewrite\", \"#text2 span.typewrite\", \"#text3 span.typewrite\", \"#dummy\"]);\n\n    };\n<\/code><\/pre>\n<\/li>\n<li>\n<p>HTML body:<\/p>\n<pre><code><br id=\"text1\" \/>text one...<br \/><br \/>\n<br id=\"text2\" \/>text two...<br \/><br \/>\n<br id=\"text3\" \/>text three<br \/><br \/>\n<br id=\"dummy\" \/><br \/><br \/>\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<p id=\"rop\"><small>Originally posted 2013-11-09 21:18:23. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>CSS: span.typewrite { opacity: 0; -webkit-transition-property: opacity; -webkit-transition-duration: 0s; -webkit-transition-timing-function: linear; } javascript: 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 = &#8220;&#8221;; for (var i = 0; i &lt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-663","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/663\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}