B14 · פרלקס עדין (translate3d)

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}

/* B14 · פרלקס עדין (translate3d) */
.pxs{position:relative;height:70vh;overflow:hidden;border-radius:var(--r, 14px);margin-inline:var(--gutter, clamp(24px, 5vw, 96px));display:grid;place-items:center}
.pxbg{position:absolute;inset:-28% 0;z-index:0;will-change:transform;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--bg, #f7f7fa) 26%,transparent) 0 2px,transparent 2.5px) 0 0/38px 38px,linear-gradient(150deg,#1b2653,#3b5bdb)}
.pxs h2{position:relative;z-index:1;color:#fff;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));text-align:center;max-width:18ch;will-change:transform}
.pxs small{position:absolute;bottom:18px;inset-inline:0;text-align:center;color:rgba(255,255,255,.7);font-size:13px;z-index:1}

HTML

<div class="stage tight"><div class="pxs"><div class="pxbg"></div><h2>הרקע נע לאט, הכותרת נעה נגדו</h2><small>גלול, ותראה את רשת הנקודות מחליקה</small></div></div>

JS

const bg=document.querySelector(".pxbg"),head=document.querySelector(".pxs h2"),wrap=document.querySelector(".pxs");
const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
const AMP=matchMedia("(max-width:767px)").matches?60:120;   // הטווח הישן היה 40 ולא נראה בכלל
let tick=false;
function frame(){tick=false;
  const r=wrap.getBoundingClientRect();
  const p=(innerHeight-r.top)/(innerHeight+r.height);       // 0 לפני הכניסה, 1 אחרי היציאה
  bg.style.transform="translate3d(0,"+((p-.5)*AMP)+"px,0)";
  head.style.transform="translate3d(0,"+((.5-p)*AMP*.22)+"px,0)";}
if(!reduce){addEventListener("scroll",()=>{if(!tick){tick=true;requestAnimationFrame(frame)}},{passive:true});frame();}