G61 · תמונה שמתאספת מרצועות בגלילה

CSS

/* G61 · תמונה שמתאספת מרצועות בגלילה */
.bl{height:300vh;position:relative}
.bl-stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.bl-frame{position:relative;width:min(880px,90vw);aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  display:flex;background:var(--card, #fff)}
/* כל רצועה מציגה חלק אחר של אותה תמונה: הרקע רחב פי מספר הרצועות */
.bl-slice{flex:1;height:100%;background-image:linear-gradient(115deg,#3b5bdb,#0b7285 34%,#2b8a3e 58%,#e8590c 82%,#5f3dc4);
  background-repeat:no-repeat;will-change:transform}
.bl-cap{position:absolute;bottom:9vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px}
.bl-after{padding:14vh var(--gutter, clamp(24px, 5vw, 96px));max-width:min(680px,92vw);margin-inline:auto;text-align:center;
  color:var(--muted, #6a6d85);font-size:17px;line-height:1.9}

HTML

<div class="bl"><div class="bl-stick">
  <div class="bl-frame"></div>
  <p class="bl-cap">גלול. הרצועות מתיישרות והתמונה מתאחדת.</p>
</div></div>
<p class="bl-after">במקום גרדיאנט אפשר לשים תמונה אחת של הלקוח, ואותו קוד יפרק אותה לרצועות בלי לחתוך שום קובץ מראש.</p>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const N=9;
  const frame=document.querySelector(".bl-frame");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  const slices=[];
  for(let i=0;i<N;i++){
    const s=document.createElement("div");
    s.className="bl-slice";
    // הרקע ברוחב הפריים כפול מספר הרצועות, וכל רצועה מוסטת בחלק שלה
    s.style.backgroundSize=(N*100)+"% 100%";
    s.style.backgroundPosition=(i/(N-1)*100)+"% 50%";
    frame.appendChild(s);slices.push(s);
  }
  if(reduce)return;
  gsap.fromTo(slices,
    {yPercent:i=>(i%2?1:-1)*(60+i*7),opacity:.25},
    {yPercent:0,opacity:1,ease:"none",
     scrollTrigger:{trigger:".bl",start:"top top",end:"bottom bottom",scrub:.6}});
})();