javascript - 滚动无限移动文本

Question

我想在这个 link 中制作一个像这个文本一样的移动无限文本(我们受到超过 28,000 人的信任...) .我已经尝试过一些东西，但我还没有达到我想要的。它很接近但不是无限的。

<h1 class="deneme display-1 " id="movingtext">We are trusted by over 28,000 clients to power stunning websites.We are trusted by over 28,000 clients to power stunning websites.</h1>

window.addEventListener('scroll', () => {
  var elemen = document.getElementById("movingtext");
  elemen.style = "left:-450px"
  var rect = elemen.getBoundingClientRect();
  var rect1 = rect.left;
  var scrolled = window.scrollY;
  var deg = (rect1 + scrolled) / 1.8;

  elemen.style = "left:" + deg + "px";
  console.log(rect.left, rect.right);
})

Answer 1

正如您在以下屏幕截图中看到的，这也不是无限的:

first row with "We are trusted by over 28,000..."和 second row

只是在普通屏幕上你无法到达元素的末尾。

您可以通过在滚动上添加监听器并将要移动的元素转换为 window.pageYOffset 值来完成类似的操作。

类似于:

window.addEventListener('scroll', () => {
  const movingtext = document.getElementById("movingtext");
  const scrolled = window.pageYOffset;
  //feel free to play with this value to change the speed of the transform ( the `* 3` part)
  const left = scrolled * 3;

  movingtext.style.transform = `translate3d(-${left}px, 0px, 0px)`;
})

.wrapper {
  height: 300vh;
  padding-top: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

.infinite-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

<div class="wrapper">
<h1 class="infinite-text" id="movingtext">We are trusted by over 28,000 clients to power stunning websites.We are trusted by over 28,000 clients to power stunning websites.</h1>
</div>

请注意，这是草稿。您可能想尝试变换的大小和速度或其他属性。

请注意，对于此示例，容器具有 max-width: 100vw; 和 overflow: hidden(因此它不会显示元素的滚动条比屏幕大)，元素本身有 white-space: nowrap;