Moving Background stutter/lag

我无法正常使网站正常工作。它有许多移动背景，并使用CSS反转滤镜。Moving Background stutter/lag

请看看这里：

我的问题是，即使平均电脑有问题处理运动背景，这是我想要的网站有效果至关重要。我认为这个问题可能是因为我有太多的移动背景的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使用率的方式或任何使它口吃是非常，而不必放弃我想要达到的效果...或者是否在某个地方有糟糕的编程，我应该改变以提高性能。

谢谢！

来源

2015-02-10 joCkelius

我想你问*很多*的浏览器来实现这一点。图像本身是2000x3000像素。然后是反转效果和叠加图像，所有这些都需要为移动的每个单帧计算透明度（每秒多次）。你可以对它进行优化，但是在页面上发生了很多事情，我不会抱有希望。 – 2015-02-10 11:00:48

（美丽的网站顺便说一句，即使它是结构性的！） – 2015-02-10 11:06:25

使用媒体查询和加载不同大小（预缩放）的背景图像，这可能会有所帮助。 – Kroltan 2015-02-10 11:12:27

那么，动画background-position总是一个坏主意。特别是在这些巨大的图像上。尝试将背景图片放入自己的容器中，并使用transform: translate()甚至transform: translate3d()为该容器设置动画。它会更顺畅。

如果你想用JS做，我可以推荐Greensocks TweenMax动画库。它的速度非常快，它会在可用时使用CSS转换，如果没有则会回退。

并且将backface-visibility: hidden添加到您的动画元素也会使事情变得顺利。问题是，看起来你正在为你的网站使用backface-visiblity。为了让事情更好，我建议你重新考虑你的结构并尽可能使用CSS transform的动画。

来源

2015-02-10 11:01:41 ProblemsOfSumit

Moving Background stutter/lag

回答

相关问题