G48 · פסקה שנצבעת מילה-מילה בגלילה

CSS

/* G48 · פסקה שנצבעת מילה-מילה בגלילה */
.hl{max-width:min(880px,92vw);margin-inline:auto;padding-block:34vh}
.hl p{margin:0;font-size:clamp(24px,3.4vw,46px);line-height:1.5;font-weight:600}
.hl .w{color:var(--muted, #6a6d85);transition:none;position:relative;display:inline-block}
/* ההדגשה נפתחת מאחורי המילה. בעברית היא נפתחת מימין, מתחילת המילה */
.hl .mk{position:relative;z-index:0;display:inline-block;padding-inline:.14em;border-radius:.16em}
.hl .mk::before{content:"";position:absolute;inset:0;border-radius:.16em;background:var(--accent, #4a3aff);
  transform:scaleX(var(--fill,0));transform-origin:right center;z-index:-1}
.hl-foot{text-align:center;color:var(--muted, #6a6d85);font-size:14px;padding-bottom:12vh}

HTML

<div class="hl"><p id="hl-src">אנחנו לא בונים אתרים יפים. אנחנו בונים אתרים שמביאים פניות. ההבדל הוא לא בעיצוב אלא בסדר: קודם מבינים את הלקוח, אחר כך כותבים, ורק בסוף פותחים כלי עיצוב.</p></div>
<p class="hl-foot">גלול לאט. כל מילה נצבעת בתורה.</p>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const p=document.getElementById("hl-src");
  const MARK=["פניות","בסדר","הלקוח"];          // מילות המפתח שיקבלו הדגשה
  const bare=w=>w.replace(/[.,:;!?"'׳״]/g,"");   // סימני פיסוק נדבקים למילה ושוברים השוואה
  // פיצול למילים בלבד. בעברית לא מפצלים לאותיות: זה שובר ניקוד וקוראי מסך
  const words=p.textContent.trim().split(/\s+/);
  p.textContent="";
  const marks=[];
  const spans=words.map((w,i)=>{
    const s=document.createElement("span");
    s.className="w";
    const core=bare(w);
    if(MARK.includes(core)){
      // ההדגשה עוטפת את המילה בלבד. סימן הפיסוק נשאר מחוץ לצבע
      const mk=document.createElement("span");
      mk.className="mk";mk.textContent=core;
      s.appendChild(mk);
      s.appendChild(document.createTextNode(w.slice(core.length)));
      marks.push({mk:mk,i:i});
    } else s.textContent=w;
    p.appendChild(s);
    if(i<words.length-1)p.appendChild(document.createTextNode(" "));
    return s;
  });
  const STEP=.35;
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){
    gsap.set(spans,{color:"var(--ink)"});
    gsap.set(marks.map(m=>m.mk),{color:"#fff","--fill":1});
    return;
  }
  const tl=gsap.timeline({scrollTrigger:{trigger:".hl",start:"top 78%",end:"bottom 62%",scrub:.4}});
  tl.to(spans,{color:"var(--ink)",duration:.4,stagger:STEP,ease:"none"},0);
  // ההדגשה של כל מילת מפתח נפתחת בדיוק בזמן שהמילה שלה נצבעת
  marks.forEach(m=>{
    const at=m.i*STEP;
    tl.fromTo(m.mk,{"--fill":0},{"--fill":1,duration:.4,ease:"power2.out"},at)
      .to(m.mk,{color:"#fff",duration:.25},at+.1);
  });
})();