G117 · גלגלות סלוט שמתייצבות בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* G117 · גלגלות סלוט שמתייצבות בגלילה */
.sl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px));max-width:960px;margin-inline:auto;padding-block:10vh 20vh}
.sl-it{text-align:center}
.sl-reel{height:1.1em;overflow:hidden;font-size:clamp(48px,7vw,110px);font-weight:900;line-height:1.1;color:var(--ink, #16182b);font-variant-numeric:tabular-nums;
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.sl-strip{display:flex;flex-direction:column;will-change:transform}
.sl-strip span{height:1.1em}
.sl-lbl{color:var(--muted, #6a6d85);font-size:15px;margin-top:8px}
@media(max-width:767px){.sl{grid-template-columns:1fr;gap:28px}}

HTML

<div class="stage"><div class="sl">
  <div class="sl-it"><div class="sl-reel" data-final="12" data-suffix="+"></div><div class="sl-lbl">שנות ניסיון</div></div>
  <div class="sl-it"><div class="sl-reel" data-final="140" data-suffix=""></div><div class="sl-lbl">פרויקטים שעלו לאוויר</div></div>
  <div class="sl-it"><div class="sl-reel" data-final="98" data-suffix="%"></div><div class="sl-lbl">לקוחות שממליצים</div></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const reels=gsap.utils.toArray(".sl-reel"),reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  reels.forEach((r,i)=>{
    const fin=r.dataset.final,suf=r.dataset.suffix||"",strip=document.createElement("div");strip.className="sl-strip";
    // רצועה של 12 ערכים אקראיים ואז הערך הסופי: הגלגלת נראית כאילו "עברה" על הרבה מספרים
    const vals=[];for(let k=0;k<12;k++)vals.push(Math.floor(Math.random()*(+fin*1.6+9)));vals.push(fin);
    vals.forEach(v=>{const s=document.createElement("span");s.textContent=v+suf;strip.appendChild(s);});
    r.appendChild(strip);
    if(reduce){gsap.set(strip,{yPercent:-100*(vals.length-1)/vals.length});return;}
    gsap.fromTo(strip,{yPercent:0},{yPercent:-100*(vals.length-1)/vals.length,duration:2.2+i*.4,ease:"power4.out",
      scrollTrigger:{trigger:".sl",start:"top 75%",once:true}});
  });
})();