移动背景断断续续/滞后

Moving Background stutter/lag

本文关键字：滞后 断断续续 背景 移动      更新时间：2023-09-26

我很难让网站正常工作。它有许多移动背景，并使用了css反转过滤器。

请看这里：

http://epicstudios.de/blackwhite/

我的问题是，即使是普通的计算机也无法处理移动的背景，这对我想要的网站效果至关重要。我想问题可能是我有太多背景移动的潜水器，但由于这些潜水器有不同的倒置背景图像，我不能让它们透明。或者有没有一种方法可以在不给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的动画。

相关文章：