G69 · חשיפת פיקסלים בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}

/* G69 · חשיפת פיקסלים בגלילה */
.px{height:280vh;position:relative}
.px-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.px-frame{position:relative;width:min(880px,92vw);aspect-ratio:16/10;border-radius:18px;overflow:hidden}
.px-img{position:absolute;inset:0;border-radius:0;font-size:0}
.px-grid{position:absolute;inset:0;display:grid}
.px-cell{background:var(--bg, #f7f7fa);will-change:opacity}
.px-cap{position:absolute;bottom:8vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px}

HTML

<div class="px"><div class="px-stage">
  <div class="px-frame">
    <div class="ph px-img ph-c"></div>
    <div class="px-grid"></div>
  </div>
  <p class="px-cap">גלול. הריבועים נעלמים בסדר אקראי.</p>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const COLS=14, ROWS=9;
  const grid=document.querySelector(".px-grid");
  grid.style.gridTemplateColumns="repeat("+COLS+",1fr)";
  grid.style.gridTemplateRows="repeat("+ROWS+",1fr)";
  const cells=[];
  for(let i=0;i<COLS*ROWS;i++){
    const d=document.createElement("div");d.className="px-cell";grid.appendChild(d);cells.push(d);
  }
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce){gsap.set(cells,{opacity:0});return;}
  gsap.to(cells,{opacity:0,ease:"none",
    // stagger אקראי עם from:"random" הוא מה שמונע תחושת מחיקה מסודרת
    stagger:{each:.012,from:"random"},
    scrollTrigger:{trigger:".px",start:"top top",end:"bottom bottom",scrub:.4}});
})();