G19 · פיזור חפצים נופלים

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-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}
.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)}

/* G19 · פיזור חפצים נופלים */
.coins{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.coin{width:84px;height:84px;border-radius:50%;font-size:26px}

HTML

<div class="stage tight"><div class="coins">
<div class="coin ph ph-e c1"><span class="ph-l">₪</span></div><div class="coin ph ph-a c2"><span class="ph-l">₪</span></div><div class="coin ph ph-b c3"><span class="ph-l">₪</span></div>
<div class="coin ph ph-d c4"><span class="ph-l">₪</span></div><div class="coin ph ph-c c5"><span class="ph-l">₪</span></div><div class="coin ph ph-f c6"><span class="ph-l">₪</span></div>
<div class="coin ph ph-b c7"><span class="ph-l">₪</span></div><div class="coin ph ph-a c8"><span class="ph-l">₪</span></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

const tl=gsap.timeline({scrollTrigger:{trigger:".coins",start:"top 75%",end:"top 30%",scrub:1}});
[["-2em",50,"left bottom"],["-2em",30,"top right"],["-2em",-50,"top center"],["-2em",50,"left bottom"],
 ["-4em",-30,"top center"],["-4em",30,"center bottom"],["-6em",-50,"top right"],["-8em",-30,"center center"]]
.forEach((cfg,i)=>{
  tl.from(".c"+(i+1),{y:cfg[0],rotate:cfg[1],transformOrigin:cfg[2],opacity:0,duration:1},0);
});