如何加快背景圖像的滾動速度？

我想實現一個簡單的視差效果，其中背景圖像的滾動速度要比上面的元素快。我怎樣才能實現這與JQuery或使用JavaScript？如何加快背景圖像的滾動速度？

2016-08-07 Altair827

使用GreenSock是該一個很好的庫作爲它利用發動機罩下的CSS（GPU）。其用於大型網站，如谷歌的產品宣傳頁和更多的網站。這很棒。 –

它是一個偉大的圖書館。但我無法弄清楚使用哪個插件。 – Altair827

你可以模仿我在preview.zipstory.com只是查看源 –

獲取頁面滾動的當前位置並將其乘以您最喜歡的比例。然後改變位置的背景以產生數：

$(document).ready(function(){ 
 
    var yOffset; 
 
    $(window).scroll(function(){ 
 
     yOffset=$(window).scrollTop()*10; 
 
     $("body").css('background-position', '0px '+-yOffset+'px'); 
 
     }) 
 
})

body{ 
 
    background:url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'); 
 
    height:4000px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
&nbsp; 
 
</div>

來源

2016-08-07 14:10:12

這確實有效，但速度很慢。它更好地通過css轉換來利用GPU。你可以用JavaScript來做到這一點。如果你改變你的答案來反映這一點，你會得票。 –

謝謝。對不起，我不知道GPU的利用率。 –

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css –

如何加快背景圖像的滾動速度？

回答

相關問題