G103 · מספר פרק ענק שמתחלף בגלילה

CSS

/* G103 · מספר פרק ענק שמתחלף בגלילה */
.ch{position:relative}
.ch-num{position:sticky;top:0;height:100vh;display:grid;place-items:center;pointer-events:none;z-index:0;margin-bottom:-100vh}
.ch-clip{width:2.4ch;height:1em;font-size:clamp(160px,34vw,520px);font-weight:900;line-height:1;overflow:hidden;position:relative;color:var(--ink, #16182b);opacity:.11;font-variant-numeric:tabular-nums}
.ch-clip span{position:absolute;inset:0;display:block;text-align:center}
.ch-body{position:relative;z-index:1;max-width:min(760px,92vw);margin-inline:auto;padding-block:10vh 30vh}
.ch-sec{min-height:90vh;display:grid;align-content:center;gap:12px}
.ch-sec b{font-size:12px;color:var(--accent, #4a3aff);letter-spacing:.14em}
.ch-sec h2{margin:0;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.ch-sec p{margin:0;color:var(--muted, #6a6d85);line-height:1.7;max-width:52ch}
@media(max-width:767px){.ch-num{place-items:start end;padding:16px}.ch-clip{font-size:120px;opacity:.1}}

HTML

<div class="ch">
  <div class="ch-num" aria-hidden="true"><div class="ch-clip"><span>01</span><span>02</span><span>03</span><span>04</span></div></div>
  <div class="ch-body">
    <section class="ch-sec"><b>פרק 01</b><h2>אפיון</h2><p>מי הלקוח, מה הוא מחפש, ומה עוצר אותו. שיחה אחת, ומסמך של עמוד.</p></section>
    <section class="ch-sec"><b>פרק 02</b><h2>קופי</h2><p>המשפט הראשון נכתב כאילו הוא היחיד שייקרא. ואז כל השאר.</p></section>
    <section class="ch-sec"><b>פרק 03</b><h2>עיצוב ובנייה</h2><p>מסך אחרי מסך, מובייל קודם, ומדידה מובנית.</p></section>
    <section class="ch-sec"><b>פרק 04</b><h2>עלייה וליווי</h2><p>האתר עולה, המספרים נאספים, והשיפורים נגזרים מהם.</p></section>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const nums=gsap.utils.toArray(".ch-clip span"),secs=gsap.utils.toArray(".ch-sec");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  gsap.set(nums,{yPercent:100});gsap.set(nums[0],{yPercent:0});
  let cur=0;
  function go(k){
    if(k===cur)return;const dir=k>cur?1:-1,prev=cur;cur=k;
    if(reduce){gsap.set(nums[prev],{yPercent:100});gsap.set(nums[k],{yPercent:0});return;}
    gsap.to(nums[prev],{yPercent:-100*dir,duration:.6,ease:"power3.inOut"});
    gsap.fromTo(nums[k],{yPercent:100*dir},{yPercent:0,duration:.6,ease:"power3.inOut"});
  }
  secs.forEach((s,i)=>ScrollTrigger.create({trigger:s,start:"top 55%",end:"bottom 45%",onEnter:()=>go(i),onEnterBack:()=>go(i)}));
})();