G37 · ענן תמונות מרחפות בעומק

CSS

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

/* G37 · ענן תמונות מרחפות בעומק */
html,body{overflow-x:clip}
.cloud{height:100vh;position:relative;overflow:hidden;background:#0f1020}
.cloud-img{position:absolute;border-radius:10px;font-size:16px;will-change:transform;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.cloud-title{position:absolute;inset:auto var(--gutter, clamp(24px, 5vw, 96px)) 10%;color:#fff;font-size:clamp(24px,2.6vw,42px);font-weight:700;max-width:520px;pointer-events:none}
.cloud-title span{display:inline-block;margin-top:14px;padding:12px 22px;border-radius:999px;background:var(--card, #fff);color:var(--ink, #16182b);font-size:15px;font-weight:500}

HTML

<div class="cloud">
  <div class="cloud-img ph ph-a" data-x="8"  data-y="12" data-w="16" data-d="1.4"><span class="ph-l">1</span></div>
  <div class="cloud-img ph ph-b" data-x="30" data-y="6"  data-w="22" data-d="0.9"><span class="ph-l">2</span></div>
  <div class="cloud-img ph ph-c" data-x="58" data-y="14" data-w="10" data-d="1.8"><span class="ph-l">3</span></div>
  <div class="cloud-img ph ph-d" data-x="74" data-y="4"  data-w="18" data-d="1.1"><span class="ph-l">4</span></div>
  <div class="cloud-img ph ph-e" data-x="14" data-y="48" data-w="12" data-d="1.6"><span class="ph-l">5</span></div>
  <div class="cloud-img ph ph-f" data-x="40" data-y="42" data-w="26" data-d="0.7"><span class="ph-l">6</span></div>
  <div class="cloud-img ph ph-a" data-x="70" data-y="40" data-w="14" data-d="1.3"><span class="ph-l">7</span></div>
  <div class="cloud-img ph ph-b" data-x="86" data-y="58" data-w="9"  data-d="2"><span class="ph-l">8</span></div>
  <div class="cloud-img ph ph-c" data-x="4"  data-y="76" data-w="20" data-d="1"><span class="ph-l">9</span></div>
  <div class="cloud-title">קהילה שבונה דברים יפים<br><span>לכל הפרויקטים ←</span></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const sec=document.querySelector(".cloud"),imgs=[...sec.querySelectorAll(".cloud-img")];
  const k=innerWidth<768?1.9:1; // במובייל הענן צריך פריטים גדולים יותר כדי להיקרא
  imgs.forEach(el=>{const w=+el.dataset.w*k;gsap.set(el,{left:el.dataset.x+"%",top:el.dataset.y+"%",width:w+"vw",height:w*0.75+"vw",autoAlpha:0,scale:.9});});
  gsap.to(imgs,{autoAlpha:1,scale:1,duration:.9,ease:"power3.out",stagger:{each:.06,from:"random"},scrollTrigger:{trigger:sec,start:"top 70%",toggleActions:"play none none none"}});
  const tl=gsap.timeline({scrollTrigger:{trigger:sec,start:"top top",end:"+=160%",pin:true,scrub:1}});
  imgs.forEach(el=>tl.to(el,{y:()=>-innerHeight*0.55*(+el.dataset.d),ease:"none"},0));
  if(matchMedia("(hover:hover)").matches){
    const setters=imgs.map(el=>({x:gsap.quickTo(el,"x",{duration:.9,ease:"power3"}),d:+el.dataset.d}));
    sec.addEventListener("mousemove",e=>{const r=sec.getBoundingClientRect();const nx=(e.clientX-r.left)/r.width-.5;setters.forEach(s=>s.x(-nx*60*s.d));});
  }
})();