G17 · כרטיסים מתעופפים פנימה

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}
.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-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G17 · כרטיסים מתעופפים פנימה */
.fan{display:flex;justify-content:center;gap:var(--gap, clamp(16px, 1.6vw, 36px));padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.fan .ph{width:min(260px,28vw);height:340px;font-size:20px}
@media(max-width:767px){.fan{flex-direction:column;align-items:center}.fan .ph{width:80vw;height:180px}}

HTML

<div class="stage tight"><div class="fan">
<div class="ph ph-a fc-l"><span class="ph-l">שירות א</span></div>
<div class="ph ph-b fc-c"><span class="ph-l">שירות ב</span></div>
<div class="ph ph-c fc-r"><span class="ph-l">שירות ג</span></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

const st=()=>({trigger:".fan",start:"top 78%",end:"top 45%",scrub:1});
gsap.from(".fc-l",{x:"30vw",rotate:10,scrollTrigger:st()});
gsap.from(".fc-c",{y:"4vw",rotate:-5,scrollTrigger:st()});
gsap.from(".fc-r",{x:"-30vw",rotate:-10,scrollTrigger:st()});