javascript - 移动背景卡顿/滞后

Question

我无法让网站正常运行。它有许多移动背景并使用 css-invert 过滤器。

请看这里:

http://epicstudios.de/blackwhite/

我的问题是，即使是普通计算机也无法处理移动背景，而这对于我希望网站达到的效果至关重要。我认为问题可能是我有太多带有移动背景的 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 转换，如果不可用则回退。

向动画元素添加 backface-visibility:hidden 也会使事情变得顺利。问题是，您似乎正在使用 backface-visiblity 在您的网站上实现这种效果。为了让事情表现得更好，我建议您重新考虑您的结构并尽可能使用带有 CSS transform 的动画。