如何加快背景图像的滚动速度？

我想实现一个简单的视差效果，其中背景图像的滚动速度要比上面的元素快。我怎样才能实现这与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 –

如何加快背景图像的滚动速度？

回答

相关问题