Efek TypeWritter pada Title Elementor

Cara guna

• Pada Heading → Advanced → CSS Classes: typewriter-jaguh

• (Opsyen) Custom Attributes:

  • data-speed="28" → laju/slow

  • data-delay="400" → tunggu sebelum mula (ms)

  • data-loop="1" → ulang taip

  • data-start="scroll" → mula bila tajuk masuk viewport

• (Opsyen) Inline style untuk warna kursor:

  • style="--jtw-caret:#00FF00"

</p> <style> /* ——— Typewriter Jaguh (PRO) ——— */ .typewriter-jaguh{ display:inline-block; position:relative; visibility:hidden; white-space:pre-wrap; } .typewriter-jaguh::after{ content:""; position:absolute; right:-2px; top:0; bottom:0; width:2px; background: var(--jtw-caret, currentColor); opacity:1; animation:jtwCaret .8s steps(1) infinite; } .typewriter-jaguh.jtw-done::after{ animation:none; opacity:0; }</p> <p>.jtw-char{ opacity:0; } .jtw-char.jtw-show{ opacity:1; }</p> <p>@keyframes jtwCaret { 50%{opacity:0} } </style> <p><script> document.addEventListener('DOMContentLoaded', function(){ const SPEED_DEFAULT = 35; // ms/char</p> <p> const boot = (el)=>{ const speed = parseInt(el.dataset.speed)||SPEED_DEFAULT; const delay = parseInt(el.dataset.delay)||0; const loop = (el.dataset.loop==="1"); const startMode = (el.dataset.start==="scroll") ? "scroll" : "auto";</p> <p> // Balut huruf sekali sahaja if(!el._jtwWrapped){ const wrap = (node)=>{ [...node.childNodes].forEach(n=>{ if(n.nodeType===3){ const frag=document.createDocumentFragment(); for(const ch of n.nodeValue){ const s=document.createElement('span'); s.className='jtw-char'; s.textContent=ch; frag.appendChild(s); } n.replaceWith(frag); }else if(n.nodeType===1){ wrap(n); } }); }; wrap(el); el._jtwWrapped = true; } const spans = el.querySelectorAll('.jtw-char');</p> <p> const play = ()=>{ el.classList.remove('jtw-done'); el.style.visibility='visible'; spans.forEach(s=>s.classList.remove('jtw-show')); spans.forEach((s,i)=> setTimeout(()=>s.classList.add('jtw-show'), delay + i*speed)); const total = delay + spans.length*speed + 300; setTimeout(()=>{ if(loop){ setTimeout(play, 1200); } else { el.classList.add('jtw-done'); } }, total); };</p> <p> if(startMode==="scroll"){ const io=new IntersectionObserver((e)=>{ if(e[0].isIntersecting){ play(); io.disconnect(); } },{threshold:.2}); io.observe(el); }else{ play(); } };</p> <p> document.querySelectorAll('.typewriter-jaguh').forEach(boot); }); </script><br />