G68 · סקשנים שדוחפים זה את זה בגלילה

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-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}

/* G68 · סקשנים שדוחפים זה את זה בגלילה */
.pu-sec{position:sticky;top:0;height:100vh;display:grid;place-items:center;text-align:center;
  padding:0 var(--gutter, clamp(24px, 5vw, 96px));color:#fff;will-change:transform;overflow:hidden}
.pu-sec .ph{position:absolute;inset:0;border-radius:0;font-size:0}
.pu-in{position:relative;z-index:1;max-width:44ch}
.pu-sec h3{margin:0;font-size:clamp(28px,4.8vw,64px);line-height:1.12;text-shadow:0 3px 24px rgba(0,0,0,.35)}
.pu-sec p{margin:14px 0 0;font-size:17px;line-height:1.8;opacity:.9;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.pu-veil{position:absolute;inset:0;background:#0b0c14;opacity:0;pointer-events:none;z-index:2}

HTML

<div class="pu">
  <section class="pu-sec"><div class="ph ph-a"></div><div class="pu-in"><h3>אפיון לפני עיצוב</h3>
    <p>השלב שקובע אם האתר יביא פניות או רק ייראה טוב.</p></div><div class="pu-veil"></div></section>
  <section class="pu-sec"><div class="ph ph-c"></div><div class="pu-in"><h3>קופי שמדבר אל הלקוח</h3>
    <p>כל כותרת עונה על שאלה אמיתית של מי שנחת בעמוד.</p></div><div class="pu-veil"></div></section>
  <section class="pu-sec"><div class="ph ph-d"></div><div class="pu-in"><h3>עיצוב בשפה אחת</h3>
    <p>מערכת אחת של צבע, טיפוגרפיה וריווח שחוזרת בכל עמוד.</p></div><div class="pu-veil"></div></section>
  <section class="pu-sec"><div class="ph ph-e"></div><div class="pu-in"><h3>מדידה מהיום הראשון</h3>
    <p>מחברים מעקב לפני העלייה לאוויר, ולא חודש אחרי.</p></div><div class="pu-veil"></div></section>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const secs=gsap.utils.toArray(".pu-sec");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  secs.forEach((sec,i)=>{
    if(i===secs.length-1)return;
    // הסקשן הנוכחי נסוג ומתכהה בזמן שהבא אחריו עולה מעליו
    gsap.timeline({scrollTrigger:{trigger:secs[i+1],start:"top bottom",end:"top top",scrub:.5}})
      .fromTo(sec,{scale:1,y:0},{scale:.9,y:-40,ease:"none"},0)
      .fromTo(sec.querySelector(".pu-veil"),{opacity:0},{opacity:.55,ease:"none"},0);
  });
})();