移动背景停顿/滞后

Question

我无法让网站正常工作。 它具有许多移动的背景，并使用了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使用率或使它结结巴巴，而不必放弃我想要的效果……或者我是否在某个地方编程不好，应该进行更改以提高性能。

谢谢！

Answer 1

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

如果要使用JS，我可以推荐Greensocks TweenMax动画库。 该死的很快，并且将在可用时使用CSS转换，如果没有，则使用CSS转换。

并增加backface-visibility: hidden在动画元素中也可以使事情变得平滑。 问题是，您似乎正在使用backface-visiblity来实现网站上的效果。 为了使性能更好，我建议您重新考虑您的结构，并尽可能使用具有CSS transform动画。