G81 · פרלקס עכבר בהירו

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-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.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)}

/* G81 · פרלקס עכבר בהירו */
.mp{position:relative;min-height:min(80vh,720px);display:grid;place-items:center;overflow:hidden;border-radius:var(--r, 14px);background:var(--ink, #16182b);color:var(--bg, #f7f7fa)}
.mp-l{position:absolute;will-change:transform}
.mp-bg{inset:-8%;background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--accent, #4a3aff) 45%,transparent),transparent 60%)}
.mp-card{width:min(46vw,420px);aspect-ratio:4/3;inset-inline-start:12%;top:22%}
.mp-card .ph{width:100%;height:100%;font-size:22px;box-shadow:0 40px 80px rgba(0,0,0,.35)}
.mp-tag{inset-inline-end:16%;top:20%;background:var(--card, #fff);color:var(--ink, #16182b);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.mp-tag.b{top:auto;bottom:20%;inset-inline-end:10%}
.mp-copy{position:relative;z-index:2;text-align:center;max-width:26ch;padding-inline:24px}
.mp-copy h2{margin:0 0 10px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.mp-copy p{margin:0;opacity:.8}
@media(max-width:767px){.mp-card{width:64vw;top:8%}.mp-tag{font-size:12px}}

HTML

<div class="stage tight"><div class="mp">
  <div class="mp-l mp-bg" data-depth=".3"></div>
  <div class="mp-l mp-card" data-depth="1"><div class="ph ph-b"><span class="ph-l">ויז'ואל</span></div></div>
  <div class="mp-l mp-tag" data-depth="1.8">+38% פניות</div>
  <div class="mp-l mp-tag b" data-depth="1.4">זמן טעינה 0.9s</div>
  <div class="mp-copy"><h2>המערכת שעובדת בשבילכם</h2><p>הזז את הסמן</p></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const layers=gsap.utils.toArray(".mp-l"),zone=document.querySelector(".mp"),MAX=24;
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  if(matchMedia("(hover:hover) and (pointer:fine)").matches){
    const movers=layers.map(l=>({d:+l.dataset.depth||1,x:gsap.quickTo(l,"x",{duration:.6,ease:"power3.out"}),y:gsap.quickTo(l,"y",{duration:.6,ease:"power3.out"})}));
    zone.addEventListener("mousemove",e=>{const r=zone.getBoundingClientRect(),nx=(e.clientX-r.left)/r.width-.5,ny=(e.clientY-r.top)/r.height-.5;
      movers.forEach(m=>{m.x(-nx*MAX*m.d);m.y(-ny*MAX*m.d);});});
    zone.addEventListener("mouseleave",()=>movers.forEach(m=>{m.x(0);m.y(0);}));
  }else{
    // מגע: אותו עומק, מונע מגלילה במקום מסמן
    layers.forEach(l=>gsap.fromTo(l,{y:20*(+l.dataset.depth||1)},{y:-20*(+l.dataset.depth||1),ease:"none",scrollTrigger:{trigger:zone,start:"top bottom",end:"bottom top",scrub:.5}}));
  }
})();