如何让图像在 Javascript 中无限重复滚动？

Question

我制作网页只是为了一点乐趣。我希望背景图像在首次加载页面时不断向左滚动。该图像在 CSS 中设置为重复 x，并且在端到端放置时是无缝的。我写的这段代码是针对正确的方向吗？

为了简单起见，我希望保留 JS vanilla，但如果 JQuery、CSS 或其他库能更好地处理这个问题，我会洗耳恭听。

非常感谢您的帮助！

我已经在一个简单的 HTML 文档中尝试了一些原始 JavaScript 代码。到目前为止，我的努力还没有让图像动起来。

document.addEventListener("DOMContentLoaded", function() {
  var y = 0;
  while (true) {
    y -= 1;
    document.getElementById("bgImg").left = y;
  }
})

#bgImg {
  background-image: url("img1.jpg");
  background-repeat: repeat-x;
  width: 100%;
  height: 660px;
  display: inline;
}

<div id="bgImg">
</div>

这只会冻结我的浏览器并且根本不会滚动。可能要感谢 "while(true)".

Answer 1

您将元素向左移动，但实际上您应该移动背景位置。接下来是 while(1) 循环，它将无限地运行。所以2个任务，创建一个动画帧来不运行无限。并更改背景位置属性.

var left = 0;
// You might want to add a time delta
function animate() {
    requestAnimationFrame( animate );
    document.getElementById("bgImg").style.backgroundPosition = '0 ' +left-- + 'px';
}
animate();

请注意，代码可能无法正常工作，但可以让您了解解决方案。

查看 requestAnimationFrame 了解它的作用。

编辑
看看IronFlare方案，用css更漂亮。

Answer 2

这最好用 CSS animation 而不是 JavaScript 来完成。 CSS 关键帧动画旨在以最小的内存开销在预设属性状态之间循环平滑过渡（并且没有同步 while 循环 :P）。

您唯一需要添加的信息是图像的宽度。如果在动画的 to 状态下使用此值作为 background-position 的 x 坐标，一旦背景移动了那么多像素，它就会跳回 from 位置.如果您已正确设置宽度，此跳转将对查看者不可见。

#bg {
  background: url('https://www.gravatar.com/avatar/e47523b278f15afd925a473e2ac0b966?s=120&d=identicon&r=PG&f=1');
  background-repeat: repeat-x;
  width: 240px;
  height: 120px;
  animation: bgScrollLeft 5s linear infinite;
}

@keyframes bgScrollLeft {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -120px 0;
  }
}

<div id="bg"></div>

Answer 3

看到你的问题后，我刚刚在我自己的网站上实现了这个。好主意！

function animateBg(px=0){
    requestAnimationFrame(()=>{
        document.body.style.backgroundPosition = `${px}px 0px`;
        animateBg(px+0.5);
    });
}
animateBg();

假设您在CSS中设置了背景图片。改变0.5来改变速度。

如何让图像在 Javascript 中无限重复滚动？

How do I make an image endlessly repeat scroll in Javascript?

html

javascript

animation

scroll

motion