LM1 · שכבות סחיפה

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}

/* LM1 · שכבות סחיפה */
.driftsec{position:relative;height:90vh;background:#101223;border-radius:var(--r, 14px);margin-inline:var(--gutter, clamp(24px, 5vw, 96px));overflow:hidden;display:flex;align-items:center;justify-content:center}
.dl{position:absolute;border-radius:50%;filter:blur(46px);will-change:translate}
.dchip{will-change:translate,rotate}
.driftsec h2{color:#fff;position:relative;z-index:2;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.dchip{position:absolute;z-index:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);border-radius:14px;padding:12px 18px;color:#cdd0e8;font-size:13px;transform:rotate(-3deg)}

HTML

<div class="stage tight"><div class="driftsec">
<div class="dl" data-drift="y:2,r:-0.3" style="width:340px;height:340px;background:rgba(44,247,217,.16);top:-14%;inset-inline-start:-4%"></div>
<div class="dl" data-drift="y:0.5,x:-1,r:0.2" style="width:260px;height:260px;background:rgba(244,158,64,.15);bottom:-12%;inset-inline-end:6%"></div>
<div class="dchip" data-drift="y:1.5" style="top:20%;inset-inline-end:12%">שכבה מהירה (1.5)</div>
<div class="dchip" data-drift="y:0.4,x:-0.4" style="bottom:24%;inset-inline-start:10%;transform:rotate(2deg)">שכבה איטית (0.4)</div>
<h2>שכבות בסחיפה איטית</h2>
</div></div>

JS

const reduced=matchMedia("(prefers-reduced-motion: reduce)").matches;
if(!reduced){
  const drifts=[...document.querySelectorAll("[data-drift]")].map(el=>{
    const p={};el.dataset.drift.split(",").forEach(s=>{const kv=s.split(":");p[kv[0]]=+kv[1]});
    return{el,y:p.y||0,x:p.x||0,r:p.r||0,sec:el.closest(".driftsec")};
  });
  const AMP=110;                       // המרחק לשכבה במקדם 1, לכל אורך המעבר על המסך
  let tick=false;
  function frame(){tick=false;const vh=innerHeight;
    drifts.forEach(d=>{
      const rc=d.sec.getBoundingClientRect();
      const t=Math.min(1,Math.max(0,(vh-rc.top)/(vh+rc.height)));
      // p נע מ-1 ל--1 סביב אמצע המעבר, ולכן במרכז המסך השכבה יושבת בדיוק במקום שעוצבה
      const p=1-t*2;
      d.el.style.translate=(p*d.x*AMP)+"px "+(p*d.y*AMP)+"px";
      if(d.r)d.el.style.rotate=(p*d.r*20)+"deg";
    });}
  addEventListener("scroll",()=>{if(!tick){tick=true;requestAnimationFrame(frame)}},{passive:true});
  frame();
}