B42 · מרקי שמגיב למהירות הגלילה

CSS

/* B42 · מרקי שמגיב למהירות הגלילה */
.vm{overflow:hidden;border-block:1px solid var(--line, #e4e4ee);background:var(--card, #fff);padding-block:clamp(16px,2vw,30px)}
.vm+.vm{border-top:0}
.vm-track{display:flex;gap:clamp(28px,4vw,64px);width:max-content;will-change:transform}
.vm-track span{font-size:clamp(26px,4vw,66px);font-weight:800;white-space:nowrap;color:var(--ink, #16182b)}
.vm-track span.o{color:transparent;-webkit-text-stroke:1px var(--muted, #6a6d85)}
.vm.alt .vm-track span{font-size:clamp(18px,2vw,30px);font-weight:600;color:var(--muted, #6a6d85)}
.vm-note{text-align:center;color:var(--muted, #6a6d85);font-size:14px;padding:18px var(--gutter, clamp(24px, 5vw, 96px)) 0}

HTML

<div class="vm"><div class="vm-track">
  <span>אתרי תדמית</span><span class="o">דפי נחיתה</span><span>חנויות</span><span class="o">מערכות</span>
  <span>אתרי תדמית</span><span class="o">דפי נחיתה</span><span>חנויות</span><span class="o">מערכות</span>
</div></div>
<div class="vm alt"><div class="vm-track">
  <span>אפיון</span><span>קופי</span><span>עיצוב</span><span>פיתוח</span><span>מדידה</span><span>ליווי</span>
  <span>אפיון</span><span>קופי</span><span>עיצוב</span><span>פיתוח</span><span>מדידה</span><span>ליווי</span>
</div></div>
<p class="vm-note">גלול מהר ולאט, ואז גלול אחורה. הרצועה מגיבה.</p>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  document.querySelectorAll(".vm").forEach((wrap,idx)=>{
    const track=wrap.querySelector(".vm-track");
    const half=track.scrollWidth/2;
    // עמוד עברי: הרצועה זורמת ימינה, ולכן מתחילים במינוס וחוזרים לאפס
    const loop=gsap.fromTo(track,{x:-half},{x:0,duration:14+idx*4,ease:"none",repeat:-1});
    if(reduce){loop.pause();return;}
    const skewTo=gsap.quickTo(track,"skewX",{duration:.4,ease:"power3"});
    let scale=1;
    ScrollTrigger.create({
      onUpdate:self=>{
        const v=self.getVelocity();
        const dir=v>0?1:-1;                                   // כיוון הגלילה קובע את כיוון הזרימה
        const boost=gsap.utils.clamp(1,6,1+Math.abs(v)/900);  // מהירות מוסיפה דחיפה, עם תקרה
        scale=dir*boost;
        loop.timeScale(scale);                                // השמה ישירה, מגיבה מיד
        skewTo(gsap.utils.clamp(-8,8,-v/260));
      }
    });
    // דעיכה חזרה לקצב הבסיס. בלי זה הרצועה נשארת מהירה לנצח אחרי גלילה חדה.
    gsap.ticker.add(()=>{
      const base=Math.sign(scale)||1;
      if(Math.abs(scale-base)<.02)return;
      scale+=(base-scale)*.05;
      loop.timeScale(scale);
    });
  });
})();