G66 · רקע שמתחלף בין סקשנים בחשיפה מסכתית

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)}

/* G66 · רקע שמתחלף בין סקשנים בחשיפה מסכתית */
.bgs{position:relative}
.bgs-fixed{position:sticky;top:0;height:100vh;overflow:hidden;z-index:0}
.bgs-layer{position:absolute;inset:0;border-radius:0;font-size:0;clip-path:inset(100% 0 0 0)}
.bgs-layer:first-child{clip-path:inset(0 0 0 0)}
.bgs-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,20,.55),rgba(10,10,20,.72))}
.bgs-content{position:relative;z-index:1;margin-top:-100vh}
.bgs-sec{min-height:100vh;display:grid;place-items:center;text-align:center;padding:0 var(--gutter, clamp(24px, 5vw, 96px));color:#fff}
.bgs-sec h3{margin:0;font-size:clamp(28px,4.6vw,60px);max-width:18ch;line-height:1.14}
.bgs-sec p{margin:14px auto 0;max-width:44ch;font-size:17px;line-height:1.8;opacity:.86}
.bgs-num{display:block;font-size:13px;letter-spacing:.1em;opacity:.7;margin-bottom:12px}

HTML

<div class="bgs">
  <div class="bgs-fixed">
    <div class="ph bgs-layer ph-a"></div>
    <div class="ph bgs-layer ph-c"></div>
    <div class="ph bgs-layer ph-d"></div>
    <div class="ph bgs-layer ph-e"></div>
    <div class="bgs-veil"></div>
  </div>
  <div class="bgs-content">
    <section class="bgs-sec"><div><span class="bgs-num">שלב 01</span><h3>שיחת אפיון</h3>
      <p>מבינים את העסק ואת הלקוח לפני שנוגעים בעיצוב.</p></div></section>
    <section class="bgs-sec"><div><span class="bgs-num">שלב 02</span><h3>קופי ומבנה</h3>
      <p>המסרים נכתבים קודם, וסדר הסקשנים נגזר מהם.</p></div></section>
    <section class="bgs-sec"><div><span class="bgs-num">שלב 03</span><h3>עיצוב ופיתוח</h3>
      <p>המבנה הופך לאתר חי, מהיר, שנראה נכון בכל מסך.</p></div></section>
    <section class="bgs-sec"><div><span class="bgs-num">שלב 04</span><h3>עלייה ומדידה</h3>
      <p>מחברים מעקב, עולים לאוויר, ומשפרים לפי נתונים.</p></div></section>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const layers=gsap.utils.toArray(".bgs-layer");
  const secs=gsap.utils.toArray(".bgs-sec");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  secs.forEach((sec,i)=>{
    if(i===0)return;
    // כל שכבה נחשפת מלמטה בזמן שהסקשן שלה עולה, ונשארת חשופה אחריו
    gsap.fromTo(layers[i],{clipPath:"inset(100% 0 0 0)"},{clipPath:"inset(0% 0 0 0)",ease:"none",
      scrollTrigger:{trigger:sec,start:"top 85%",end:"top 25%",scrub:reduce?false:.5}});
  });
})();