typing-effect
Version:
Typing effect that prevents elements from jumping around when the text becomes multiline
2 lines (1 loc) • 1.04 kB
JavaScript
var typingEffect=function(){"use strict";return function(e,{speed:t=30,delay:r=300,reset:n=!0}={}){const i={speed:t,delay:r,reset:n};let a=0;if(e instanceof Array||(e=[e]),0!==e.length)return function(e){e.forEach(e=>{let t=!1;const r=e.innerHTML.trim().replace(/\s{2,}/g," ").replace(/(\r\n|\n|\r)/gm,"");let n="";e.hasAttribute("data-typing-effect")||(e.style="visibility: hidden;"),e.setAttribute("aria-label",r);for(let e=0;e<r.length;e+=1)"<"===r.charAt(e)&&(t=!0),n+=t?r.charAt(e):`<span aria-hidden="true" style="visibility: hidden">${r.charAt(e)}</span>`,">"===r.charAt(e)&&(t=!1);e.innerHTML=n})}(e),new Promise(t=>{!function r(n){(function(e,t){return e.removeAttribute("data-typing-effect"),e.removeAttribute("style"),new Promise(r=>{!function n(){const i=e.querySelector("span[style]");i?(i.removeAttribute("style"),setTimeout(n,t.speed)):(t.reset&&function(e){e.innerHTML=e.getAttribute("aria-label"),e.removeAttribute("aria-label")}(e),r())}()})})(e[n],i).then(()=>{(a+=1)<e.length?setTimeout(()=>{r(a)},i.delay):t()})}(a)})}}();