javascript - 移动背景停顿/滞后

我无法让网站正常工作。它具有许多移动的背景，并使用了css-invert滤镜。

请在这里看看：

http://epicstudios.de/blackwhite/

我的问题是，即使是普通的计算机也无法处理运动背景，这对于我希望该网站具有效果至关重要。我认为问题可能出在背景移动的div太多，但是由于这些div具有不同的倒置背景图像，因此我不能只是保持透明。还是有一种不使用div而不给div背景图像的方式使用反转过滤器的方法，以便它反转其下面div的内容？我希望那很清楚。

我的动态背景脚本如下所示：

(function($) {
        var x = 0;
        var y = 0;
        var bg = $("body,.overlay,.center_cirlce,.left_circle,.right-circle,.enter,.enter_outer,.enter_inner");
        bg.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
        window.setInterval(function() {
            bg.css("backgroundPosition", -x + 'px' + ' ' + -y + 'px');
            y++;
        }, 70);
    })(jQuery);

我想知道，是否有一种方法可以减少CPU使用率或使它结结巴巴，而不必放弃我想要的效果……或者我是否在某个地方编程不好，应该进行更改以提高性能。

谢谢！

最佳答案

好吧，给background-position动画总是一个坏主意。特别是在像这样的大图像上。尝试将背景图像放入其自己的容器中，并使用transform: translate()甚至transform: translate3d()对该容器进行动画处理。它将更加流畅。

如果要使用JS，我可以推荐Greensocks TweenMax动画库。该死的很快，如果可用，它将使用CSS转换，如果没有的话，它会回退。

并且在动画元素中添加backface-visibility: hidden也会使事情变得平滑。问题是，看来您正在使用backface-visiblity在您的网站上获得这种效果。为了使性能更好，我建议您重新考虑您的结构，并尽可能将动画与CSS transform一起使用。

关于javascript - 移动背景停顿/滞后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28429925/