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

回答

相關問題