Лента от скорости

Бегущая строка ускоряется от резкого скролла и тормозит при обратном.

Скрольте резко туда-сюда.

СКОРОСТЬ•ЗАВИСИТ•ОТ СКРОЛЛА•СКОРОСТЬ•ЗАВИСИТ•ОТ СКРОЛЛА•

Лента едет сама, но резкий скролл разгоняет её — и даже разворачивает при скролле вверх. Приём thisisstudiox: связka инерции ленты со скоростью прокрутки.

Код

<div class="vmarq"><div class="track">
  <b>ТЕКСТ</b><b>ТЕКСТ</b>   <!-- контент дважды -->
  <b>ТЕКСТ</b><b>ТЕКСТ</b>
</div></div>

<script>
var track = document.querySelector(".vmarq .track");
var x = 0, vel = 0, lastY = scrollY;
var half = track.scrollWidth / 2;
(function loop() {
  var dy = scrollY - lastY; lastY = scrollY;
  vel += (dy * .35 - vel) * .08;   // скорость скролла с инерцией
  x -= 1.2 + vel;                  // базовый ход + разгон от скролла
  if (x <= -half) x += half;       // бесшовный цикл
  if (x > 0) x -= half;
  track.style.transform = "translate3d(" + x + "px,0,0)";
  requestAnimationFrame(loop);
})();
</script>

<style>
.vmarq { overflow: hidden; }
.track { display: flex; gap: 34px; width: max-content;
  white-space: nowrap; will-change: transform; }
</style>

Промпт для ИИ

Сделай бегущую ленту, реагирующую на скорость скролла (как у thisisstudiox): контент продублирован дважды; в rAF считай dy = scrollY - lastY, скорость с инерцией vel += (dy*0.35 - vel)*0.08; позиция x -= (1.2 + vel) — лента всегда едет, резкий скролл вниз её разгоняет, скролл вверх притормаживает/разворачивает. Бесшовность: если x <= -половина ширины — x += половина (и симметрично при x > 0).