G129 · מדרגות כרטיסים שנבנות בגלילה

CSS

/* G129 · מדרגות כרטיסים שנבנות בגלילה */
.st{position:relative;height:240vh}
.st-pin{position:sticky;top:0;height:100vh;display:grid;place-items:end center;perspective:1200px;overflow:hidden;padding-bottom:10vh}
.st-stage{position:relative;width:min(760px,90vw);height:60vh;transform-style:preserve-3d}
.st-card{position:absolute;inset-inline:0;bottom:0;height:42%;border-radius:18px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);padding:22px 24px;display:grid;align-content:start;gap:6px;box-shadow:0 30px 60px rgba(0,0,0,.14);will-change:transform;transform-origin:50% 100%}
.st-card b{font-size:12px;color:var(--accent, #4a3aff);letter-spacing:.14em}
.st-card h3{margin:0;font-size:clamp(18px,2.2vw,28px)}
.st-card p{margin:0;color:var(--muted, #6a6d85);font-size:14px}
@media(max-width:767px){.st{height:200vh}.st-stage{height:64vh}}

HTML

<div class="st">
  <div class="st-pin"><div class="st-stage">
    <div class="st-card"><b>שלב 01</b><h3>שיחת היכרות</h3><p>עשרים דקות, בלי התחייבות.</p></div>
    <div class="st-card"><b>שלב 02</b><h3>אפיון</h3><p>מסמך של עמוד שקובע הכל.</p></div>
    <div class="st-card"><b>שלב 03</b><h3>עיצוב</h3><p>מסך אחרי מסך, עד שנכון.</p></div>
    <div class="st-card"><b>שלב 04</b><h3>עלייה לאוויר</h3><p>ומדידה מהיום הראשון.</p></div>
  </div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const cards=gsap.utils.toArray(".st-card"),n=cards.length;
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){cards.forEach((c,i)=>gsap.set(c,{y:-i*90,z:-i*80}));return;}
  const mob=matchMedia("(max-width:767px)").matches,dy=mob?78:104,dz=mob?70:110;
  gsap.set(cards,{y:220,opacity:0,zIndex:(i)=>n-i});
  const tl=gsap.timeline({scrollTrigger:{trigger:".st",start:"top top",end:"bottom bottom",scrub:.6}});
  cards.forEach((c,i)=>tl.to(c,{y:-i*dy,z:-i*dz,opacity:1,duration:1,ease:"power3.out"},i*.35));
})();