G132 · סרגל מדידה שנע עם הגלילה

CSS

/* G132 · סרגל מדידה שנע עם הגלילה */
.rl{position:relative;height:200vh}
.rl-pin{position:sticky;top:0;height:100vh;display:grid;align-content:center;gap:24px;overflow:hidden}
.rl-big{text-align:center;font-size:clamp(64px,12vw,180px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rl-big small{display:block;font-size:clamp(14px,1.4vw,18px);font-weight:500;color:var(--muted, #6a6d85);margin-top:8px;letter-spacing:.1em}
.rl-tape{position:relative;height:90px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.rl-strip{position:absolute;top:0;left:50%;display:flex;direction:ltr;will-change:transform}
.rl-t{width:60px;flex:none;position:relative;height:90px}
.rl-t::before{content:"";position:absolute;bottom:0;left:0;width:1px;height:18px;background:var(--line, #e4e4ee)}
.rl-t.big::before{height:40px;background:var(--ink, #16182b)}
.rl-t.big::after{content:attr(data-v);position:absolute;bottom:48px;left:0;translate:-50% 0;font-size:13px;color:var(--muted, #6a6d85);font-variant-numeric:tabular-nums}
.rl-ptr{position:absolute;left:50%;bottom:0;width:2px;height:60px;background:var(--accent, #4a3aff);translate:-50% 0}
.rl-ptr::after{content:"";position:absolute;top:-6px;left:50%;translate:-50% 0;border:7px solid transparent;border-top-color:var(--accent, #4a3aff)}

HTML

<div class="rl">
  <div class="rl-pin"><div class="rl-big"><span class="rl-val">2016</span><small>מאז שהתחלנו</small></div>
  <div class="rl-tape"><div class="rl-strip"></div><div class="rl-ptr"></div></div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const strip=document.querySelector(".rl-strip"),val=document.querySelector(".rl-val"),FROM=2016,TO=2026,PER=5,W=60;
  const total=(TO-FROM)*PER;
  for(let i=0;i<=total;i++){const t=document.createElement("div");t.className="rl-t"+(i%PER===0?" big":"");if(i%PER===0)t.dataset.v=FROM+i/PER;strip.appendChild(t);}
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches,o={p:0};
  if(reduce){gsap.set(strip,{x:-total*W});val.textContent=TO;return;}
  gsap.to(o,{p:1,ease:"none",scrollTrigger:{trigger:".rl",start:"top top",end:"bottom bottom",scrub:.5},
    onUpdate(){gsap.set(strip,{x:-o.p*total*W});val.textContent=Math.round(FROM+(TO-FROM)*o.p);}});
})();