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

I want to achieve a simple parallax effect where the background image has to scroll faster than the elements above it. How can I achieve this with JQuery or using javascript?

我想实现一个简单的视差效果,其中背景图像必须比它上面的元素滚动得更快。如何使用JQuery或使用javascript实现此目的?

1 个解决方案

#1

Get the current position of page scroll and multiply it by your favorite rate. Then change the position of background to result number:

获取页面滚动的当前位置并将其乘以您最喜欢的费率。然后将背景的位置更改为结果编号:

$(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>