LM8 · מרקי מוטה ונגרר

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}

/* LM8 · מרקי מוטה ונגרר */
.tiltm-wrap{transform:rotate(-3deg);width:104vw;margin-inline-start:-2vw;background:var(--ink, #16182b);padding-block:20px;overflow:hidden}
.tiltm{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* ההזזה היא רוחב קבוצה מדויק בפיקסלים, ומספר העותקים נגזר מרוחב המסך */
.tiltm-track{display:flex;width:max-content;animation:marq linear infinite;animation-duration:var(--marq-dur,26s)}
.tiltm-set{display:flex;gap:48px;padding-inline-end:48px}
.tiltm-track span{font-weight:800;font-size:24px;color:color-mix(in srgb,var(--bg, #f7f7fa) 55%,transparent);white-space:nowrap}
.tiltm-track i{font-style:normal;color:#f49e40}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(var(--marq-shift,50%))}}

HTML

<div class="stage full"><div class="tiltm-wrap" data-dragmarq><div class="tiltm"><div class="tiltm-track">
<div class="tiltm-set"><span>עיצוב</span><i>·</i><span>פיתוח</span><i>·</i><span>אסטרטגיה</span><i>·</i><span>תנועה</span><i>·</i></div>
</div></div></div></div>

JS

(function(){
  // אותו מנגנון כמו ב-b01: מספר העותקים נגזר מרוחב המסך, וההזזה היא רוחב קבוצה מדויק
  function build(){
    const wrap=document.querySelector(".tiltm"),track=document.querySelector(".tiltm-track");
    const proto=track.firstElementChild;
    [...track.children].slice(1).forEach(c=>c.remove());
    const setW=proto.getBoundingClientRect().width;
    if(!setW)return;
    const need=Math.ceil(wrap.getBoundingClientRect().width/setW)+1;
    for(let i=1;i<need;i++){const c=proto.cloneNode(true);c.setAttribute("aria-hidden","true");track.appendChild(c);}
    track.style.setProperty("--marq-shift",setW+"px");
    track.style.setProperty("--marq-dur",(setW/58).toFixed(2)+"s");
  }
  build();
  if(document.fonts)document.fonts.ready.then(build);
  let rt;addEventListener("resize",()=>{clearTimeout(rt);rt=setTimeout(build,200);});
})();
const dm=document.querySelector("[data-dragmarq]");
let tick=false;
function frame(){tick=false;
  const r=dm.getBoundingClientRect();
  const t=(innerHeight-r.top)/(innerHeight+r.height);
  dm.style.translate=((t-.5)*120)+"px 0";}
addEventListener("scroll",()=>{if(!tick){tick=true;requestAnimationFrame(frame)}},{passive:true});
frame();