G138 · זרקור שנוסע על גריד בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G138 · זרקור שנוסע על גריד בגלילה */
.sl2{position:relative;height:240vh}
.sl2-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;--sx:80%;--sy:20%;--sr:24vw}
.sl2-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(900px,92vw)}
.sl2-grid .ph{aspect-ratio:1;font-size:18px}
.sl2-dim{position:absolute;inset:-20px;background:color-mix(in srgb,var(--bg, #f7f7fa) 86%,transparent);pointer-events:none;
  mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),transparent 60%,#000 100%);-webkit-mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),transparent 60%,#000 100%)}
@media(max-width:767px){.sl2-grid{grid-template-columns:repeat(3,1fr)}.sl2-pin{--sr:55vw}}

HTML

<div class="sl2">
  <div class="sl2-pin"><div class="sl2-grid">
    <div class="ph ph-a"><span class="ph-l">1</span></div><div class="ph ph-b"><span class="ph-l">2</span></div><div class="ph ph-c"><span class="ph-l">3</span></div><div class="ph ph-d"><span class="ph-l">4</span></div>
    <div class="ph ph-e"><span class="ph-l">5</span></div><div class="ph ph-a"><span class="ph-l">6</span></div><div class="ph ph-b"><span class="ph-l">7</span></div><div class="ph ph-c"><span class="ph-l">8</span></div>
    <div class="ph ph-d"><span class="ph-l">9</span></div><div class="ph ph-e"><span class="ph-l">10</span></div><div class="ph ph-a"><span class="ph-l">11</span></div><div class="ph ph-b"><span class="ph-l">12</span></div>
    <div class="sl2-dim"></div>
  </div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const pin=document.querySelector(".sl2-pin");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){pin.style.setProperty("--sr","200vw");return;}
  const pts=[{x:80,y:20},{x:20,y:35},{x:75,y:60},{x:25,y:85},{x:50,y:50}],o={x:80,y:20};
  const tl=gsap.timeline({scrollTrigger:{trigger:".sl2",start:"top top",end:"bottom bottom",scrub:.7},onUpdate(){pin.style.setProperty("--sx",o.x+"%");pin.style.setProperty("--sy",o.y+"%");}});
  pts.slice(1).forEach(p=>tl.to(o,{x:p.x,y:p.y,duration:1,ease:"power1.inOut"}));
})();