G12 · פרלקס עומק רב-שכבתי

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* G12 · פרלקס עומק רב-שכבתי */
.para{position:relative;height:86vh;background:#101223;border-radius:var(--r, 14px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.para .layer{position:absolute;border-radius:50%;will-change:transform}
.para h2{color:#fff;position:relative;z-index:2;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));text-align:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.para-hint{text-align:center;color:var(--muted, #6a6d85);font-size:14px;padding-top:18px}

HTML

<div class="stage"><div class="para">
<div class="layer" data-depth="0.22" style="width:min(46vw,340px);aspect-ratio:1;background:rgba(94,124,255,.30);top:-6%;right:8%"></div>
<div class="layer" data-depth="0.45" style="width:min(30vw,210px);aspect-ratio:1;background:rgba(255,169,77,.34);bottom:4%;right:30%"></div>
<div class="layer" data-depth="0.72" style="width:min(34vw,250px);aspect-ratio:1;background:rgba(56,217,169,.30);top:10%;left:10%"></div>
<div class="layer" data-depth="1" style="width:min(20vw,140px);aspect-ratio:1;background:rgba(233,89,12,.34);bottom:-4%;left:26%"></div>
<h2>שכבות בעומק שונה</h2>
</div>
<p class="para-hint">גלול. ככל שהשכבה קרובה יותר, כך היא נעה מהר יותר.</p></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  const RANGE=260;                       // המרחק המלא של השכבה העמוקה ביותר
  gsap.utils.toArray(".para .layer").forEach(el=>{
    const d=parseFloat(el.dataset.depth);
    // fromTo סימטרי סביב המיקום ב-CSS: בכניסה למסך השכבה למטה, ביציאה למעלה,
    // ובאמצע היא בדיוק במקום שבו עוצבה. עם to בלבד היא מתחילה במקום ולא זזה עד הסוף.
    gsap.fromTo(el,{y:d*RANGE},{y:-d*RANGE,ease:"none",
      scrollTrigger:{trigger:".para",start:"top bottom",end:"bottom top",scrub:.4}});
  });
  // הכותרת נעה מעט בכיוון ההפוך, וזה מה שמחדד את תחושת המרחק
  gsap.fromTo(".para h2",{y:-40},{y:40,ease:"none",
    scrollTrigger:{trigger:".para",start:"top bottom",end:"bottom top",scrub:.4}});
})();