G130 · צמצם מצלמה שנפתח בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.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)}

/* G130 · צמצם מצלמה שנפתח בגלילה */
.ir{position:relative;height:200vh}
.ir-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink, #16182b);display:grid;place-items:center}
.ir-img{position:absolute;inset:0;will-change:clip-path}
.ir-img .ph{position:absolute;inset:0;border-radius:0;font-size:0}
.ir-ring{position:absolute;width:min(60vmin,520px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--bg, #f7f7fa) 25%,transparent);pointer-events:none}
.ir-txt{position:relative;z-index:1;text-align:center;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.ir-txt h2{margin:0 0 8px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.ir-txt p{margin:0;opacity:.85}

HTML

<div class="ir">
  <div class="ir-pin"><div class="ir-img"><div class="ph ph-b"></div></div><div class="ir-ring"></div>
  <div class="ir-txt"><h2>סטודיו לצילום</h2><p>גלול כדי לפתוח את הצמצם</p></div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const img=document.querySelector(".ir-img");
  const poly=r=>{const pts=[];for(let i=0;i<8;i++){const a=Math.PI/8+i*Math.PI/4;pts.push((50+Math.cos(a)*r).toFixed(2)+"% "+(50+Math.sin(a)*r).toFixed(2)+"%");}return "polygon("+pts.join(",")+")";};
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){img.style.clipPath=poly(90);return;}
  const o={r:4};
  gsap.set(img,{clipPath:poly(4)});
  gsap.timeline({scrollTrigger:{trigger:".ir",start:"top top",end:"bottom bottom",scrub:.5},onUpdate(){img.style.clipPath=poly(o.r);}})
    .to(o,{r:matchMedia("(max-width:767px)").matches?120:90,ease:"power2.in",duration:1})
    .to(".ir-ring",{scale:2.4,opacity:0,duration:.8},0)
    .to(".ir-txt p",{opacity:0,duration:.2},0);
})();