G07 · תמונות רודפות עכבר (Image Trail)

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

/* G07 · תמונות רודפות עכבר (Image Trail) */
.tzone{height:60vh;border:2px dashed #ccc;border-radius:var(--r, 14px);display:flex;align-items:center;justify-content:center;margin-inline:var(--gutter, clamp(24px, 5vw, 96px));color:var(--muted, #6a6d85)}
.timg{width:130px;height:95px;border-radius:10px;position:fixed;left:0;top:0;pointer-events:none;z-index:99;opacity:0;font-size:18px}

HTML

<div class="stage tight"><div class="tzone"><p>הזז את העכבר כאן</p>
<div class="timg ph ph-a"><span class="ph-l">1</span></div><div class="timg ph ph-b"><span class="ph-l">2</span></div><div class="timg ph ph-c"><span class="ph-l">3</span></div>
</div></div>

JS

const zone=document.querySelector(".tzone"),imgs=document.querySelectorAll(".timg");
let mx=0,my=0,inside=false;
zone.addEventListener("mouseenter",()=>{inside=true;imgs.forEach(i=>i.style.opacity=1)});
zone.addEventListener("mouseleave",()=>{inside=false;imgs.forEach(i=>i.style.opacity=0)});
document.addEventListener("mousemove",e=>{mx=e.clientX;my=e.clientY});
imgs.forEach((img,i)=>{
  let px=0,py=0;const speed=.15-i*.04;
  gsap.ticker.add(()=>{if(!inside)return;px+=(mx-px)*speed;py+=(my-py)*speed;
    gsap.set(img,{x:px-65,y:py-48});});
});