G106 · חלונות אל תמונה קבועה

CSS

/* G106 · חלונות אל תמונה קבועה */
.wn{max-width:min(1000px,92vw);margin-inline:auto;padding-block:10vh 30vh;display:grid;gap:40vh}
.wn-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));align-items:center}
.wn-row:nth-child(even) .wn-win{order:2}
.wn-win{position:relative;height:clamp(240px,50vh,480px);border-radius:var(--r, 14px);overflow:hidden}
.wn-img{position:absolute;left:0;top:0;width:100vw;height:100vh;background:linear-gradient(135deg,#1b2a4a 0%,#2f7a6b 40%,#c98a3a 75%,#f2d16b 100%);will-change:transform}
.wn-txt h3{margin:0 0 10px;font-size:clamp(22px,2.6vw,36px)}
.wn-txt p{margin:0;color:var(--muted, #6a6d85);line-height:1.7;max-width:36ch}
@media(max-width:767px){.wn-row{grid-template-columns:1fr}.wn-row:nth-child(even) .wn-win{order:0}.wn-win{height:40vh}}

HTML

<div class="wn">
  <div class="wn-row"><div class="wn-win"><div class="wn-img"></div></div><div class="wn-txt"><h3>הכניסה</h3><p>אותה תמונה, החלון הראשון. שימו לב שהיא לא זזה איתכם.</p></div></div>
  <div class="wn-row"><div class="wn-win"><div class="wn-img"></div></div><div class="wn-txt"><h3>הסלון</h3><p>החלון השני מציץ לחלק אחר של אותה תמונה.</p></div></div>
  <div class="wn-row"><div class="wn-win"><div class="wn-img"></div></div><div class="wn-txt"><h3>המרפסת</h3><p>והשלישי סוגר את התמונה. כאילו הלכתם לאורך קיר עם חלונות.</p></div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const wins=gsap.utils.toArray(".wn-win");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  // התמונה בכל חלון מוזזת במינוס המיקום של החלון על המסך, ולכן נראית קבועה ביחס לחלון הדפדפן
  wins.forEach(w=>{const img=w.querySelector(".wn-img");
    ScrollTrigger.create({trigger:w,start:"top bottom",end:"bottom top",scrub:true,onUpdate(){const r=w.getBoundingClientRect();gsap.set(img,{x:-r.left,y:-r.top});},onRefresh(){const r=w.getBoundingClientRect();gsap.set(img,{x:-r.left,y:-r.top});}});
  });
})();