G92 · חפיסה שמתהפכת קלף אחר קלף

CSS

/* G92 · חפיסה שמתהפכת קלף אחר קלף */
.fk{position:relative;height:calc(100vh + var(--fk-n,4) * 70vh)}
.fk-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;perspective:1600px;overflow:hidden}
.fk-deck{position:relative;width:min(640px,88vw);aspect-ratio:16/9;transform-style:preserve-3d}
.fk-card{position:absolute;inset:0;border-radius:24px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:12px;
  backface-visibility:hidden;transform-origin:50% 0%;box-shadow:0 30px 70px rgba(0,0,0,.14);will-change:transform}
.fk-card q{font-size:clamp(18px,2.4vw,30px);font-weight:600;line-height:1.35;quotes:none}
.fk-card q::before{content:"״"}.fk-card q::after{content:"״"}
.fk-card cite{font-style:normal;color:var(--muted, #6a6d85);font-size:15px}
.fk-card b{font-size:12px;color:var(--accent, #4a3aff);letter-spacing:.14em}
.fk-hint{position:absolute;bottom:22px;font-size:13px;color:var(--muted, #6a6d85)}
@media(max-width:767px){.fk-deck{aspect-ratio:4/5}.fk{height:calc(100vh + var(--fk-n,4) * 55vh)}}

HTML

<div class="fk" style="--fk-n:4">
  <div class="fk-pin"><div class="fk-deck">
    <article class="fk-card"><b>01</b><q>תוך שבועיים מהעלייה לאוויר קיבלנו יותר פניות מאשר בחצי השנה שלפני.</q><cite>ד"ר נועה לוי, קליניקה בתל אביב</cite></article>
    <article class="fk-card"><b>02</b><q>הפעם הראשונה שמישהו שאל אותנו מה הלקוח צריך לפני שדיבר על צבעים.</q><cite>רועי ברק, משרד עורכי דין</cite></article>
    <article class="fk-card"><b>03</b><q>האתר מסביר את העסק טוב יותר ממני. וזה בסדר.</q><cite>מיכל אדר, סטודיו לעיצוב פנים</cite></article>
    <article class="fk-card"><b>04</b><q>המספרים בדשבורד הם מה ששכנע את השותף שלי שזה עובד.</q><cite>אייל כהן, חנות אונליין</cite></article>
  </div><p class="fk-hint">גלול כדי להפוך</p></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const cards=gsap.utils.toArray(".fk-card"),n=cards.length;
  document.querySelector(".fk").style.setProperty("--fk-n",n-1);
  cards.forEach((c,i)=>gsap.set(c,{zIndex:n-i,y:i*6,scale:1-i*.02}));   // ערימה: כל קלף מציץ מעט מתחת לקודם
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(cards,{position:"relative",y:0,scale:1,marginBottom:16});document.querySelector(".fk-pin").style.height="auto";return;}
  const tl=gsap.timeline({scrollTrigger:{trigger:".fk",start:"top top",end:"bottom bottom",scrub:.5}});
  cards.slice(0,-1).forEach((c,i)=>{
    tl.to(c,{rotateX:-180,duration:1,ease:"power2.inOut"},i)
      .to(c,{z:150,duration:.5,ease:"power2.out"},i)                    // מתרומם מהערימה כדי שלא יסתובב דרך הקלפים שמתחתיו
      .to(c,{z:0,duration:.5,ease:"power2.in"},i+.5)
      .set(c,{zIndex:0},i+.5)                                           // באמצע ההיפוך הקלף עובר לתחתית הערימה
      .to(cards.slice(i+1),{y:(k)=>k*6,scale:(k)=>1-k*.02,duration:1,ease:"power2.out"},i)
      .to(".fk-hint",{opacity:0,duration:.2},0);
  });
})();