javascript - 如何使用 Javascript 无限滚动水平文本？

Question

我想在一个框内水平无限滚动歌曲的标题。我在歌曲本身之后重复了歌曲的标题并隐藏了溢出部分，因此它给人一种无限滚动的错觉，但结果真的很不稳定。

它应该就像在汽车仪表盘上一样，如果该区域不能容纳整个文本，歌曲名称/艺术家会循环播放。

[Codepen](https://codepen.io/safiajeff/pen/MWJQOPv)

如何让它更平滑/无限？

Answer 1

鉴于您已经有两个标题副本，您可以使用 CSS 而不是 JS 来滚动。

两个标题在同一行上一个接一个。如果你将他们的容器向左移动 50%，第二个版本将在左边:0。然后第一个版本立即转到同一个地方，你不会看到任何抖动。

这不仅相当简单，只是添加了 CSS 关键帧定义而没有 JS，而且它对 CPU 和 GPU 的使用更轻，从而节省了用户的电量。

section{
  overflow :hidden;
  width: 150px;
  display:inline-block;
  border: 1px solid red;
  height: 50px;
  white-space: nowrap;
}

div{
  width: 566px;
  display: flex;
  flex-wrap: nowrap;
  animation: move 2s infinite linear; /* set the time to what you want of course */
}
@keyframes move {
  to {
    transform: translateX(-50%);
  }
}
h1{
  font-size: 20px;
  margin:0;
  padding-left:0px;
  border: 1px solid blue;
  width:283px;
}

<section>
  <div id="container">
    <h1>Simon Dominic - At Night</h1>
    <h1>Simon Dominic - At Night</h1>
  </div>
</section>