G116 · יחס שמשתנה בגלילה

CSS

/* G116 · יחס שמשתנה בגלילה */
.rt{position:relative;height:200vh}
.rt-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.rt-box{position:relative;width:min(1000px,100%);height:min(56vh,520px);border-radius:var(--r, 14px);overflow:hidden;--p:20%}
.rt-a,.rt-b{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(20px,4vw,48px)}
.rt-a{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);color:var(--ink, #16182b);justify-items:end}
.rt-b{background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);clip-path:inset(0 0 0 calc(100% - var(--p)));justify-items:start}
.rt-box b{font-size:clamp(48px,9vw,140px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rt-box small{font-size:clamp(14px,1.4vw,18px);opacity:.8;margin-top:8px}
@media(max-width:767px){.rt-b{clip-path:inset(calc(100% - var(--p)) 0 0 0)}.rt-a{align-content:start}.rt-b{align-content:end}}

HTML

<div class="rt">
  <div class="rt-pin"><div class="rt-box" role="img" aria-label="מ-20 אחוז פניות ל-80 אחוז">
    <div class="rt-a"><b><span class="rt-na">80</span>%</b><small>מהגולשים עזבו בלי לפנות</small></div>
    <div class="rt-b"><b><span class="rt-nb">20</span>%</b><small>פנו אחרי האתר החדש</small></div>
  </div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const box=document.querySelector(".rt-box"),na=document.querySelector(".rt-na"),nb=document.querySelector(".rt-nb");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  const o={p:20};
  gsap.to(o,{p:80,ease:"power2.inOut",scrollTrigger:{trigger:".rt",start:"top top",end:"bottom bottom",scrub:reduce?false:.5},
    onUpdate(){box.style.setProperty("--p",o.p+"%");nb.textContent=Math.round(o.p);na.textContent=Math.round(100-o.p);}});
})();