G110 · טקסט שנכתב עם הגלילה

CSS

/* G110 · טקסט שנכתב עם הגלילה */
.tw2{position:relative;height:220vh}
.tw2-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.tw2 p{max-width:30ch;margin:0;font-size:clamp(24px,3.2vw,46px);font-weight:600;line-height:1.5;text-align:center}
.tw2 p span{opacity:.12}
.tw2 p span.on{opacity:1}
.tw2 p i{display:inline-block;width:.08em;height:1em;background:var(--accent, #4a3aff);vertical-align:-.15em;margin-inline-start:.04em;animation:tw2-b 1s steps(1) infinite}
@keyframes tw2-b{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.tw2 p span{opacity:1}.tw2 p i{display:none}}

HTML

<div class="tw2"><div class="tw2-pin"><p data-text="אנחנו לא מוכרים אתר. אנחנו מוכרים את הרגע שבו מישהו קורא, מבין, ומרים טלפון."></p></div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const p=document.querySelector(".tw2 p"),text=p.dataset.text;
  const spans=[...text].map(ch=>{const s=document.createElement("span");s.textContent=ch;p.appendChild(s);return s;});
  const car=document.createElement("i");p.appendChild(car);
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const o={n:0};
  gsap.to(o,{n:spans.length,ease:"none",scrollTrigger:{trigger:".tw2",start:"top top",end:"bottom bottom",scrub:.4},
    onUpdate(){const k=Math.round(o.n);spans.forEach((s,i)=>s.classList.toggle("on",i<k));
      // הסמן זז אחרי האות האחרונה הגלויה
      const last=spans[Math.max(0,k-1)];if(k>0)last.after(car);else p.prepend(car);}});
})();