Question

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

请看这里：

我的问题是，即使普通计算机在处理移动背景时也存在问题，这对于我希望网站具有的效果至关重要。我认为问题可能是我有太多具有移动背景的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动画。

移动背景口吃/滞后

1 个答案: