javascript - 滚动页面时背景图像上的视差滚动

标签 javascript jquery html css parallax

我被视差问题困住了,似乎无法找到我想要的具体内容。

我的页面顶部有背景图片。我目前有 background-position: fixed 所以它有视差效果但是我需要这个图像随着页面滚动而滚动吗? ...现在我卡住了。

我相信这可以用 JavaScript 和可能的 background-position: scroll 来完成,但我只是不知道从哪里开始。

在我的基本 fiddle 中,您可以看到视差效果,但我需要图像随着页面滚动而滚动。

感谢您的帮助。

.image {
  height: 100px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-image: url('http://www.navipedia.net/images/a/a9/Example.jpg');
}
<section>
  <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>
</section>

<div class="image"></div>

<section>
  <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta."</p>

  <br><br>
  
<p>"Sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est."</p>
</section>

最佳答案

此功能将为您完成工作。 (根据您的选择更改速度变量的值)

(function(){

  var parallax = document.querySelectorAll(".image"),
      speed = 0.5;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset,
          elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

      el.style.backgroundPosition = elBackgrounPos;

    });
  };

})();

查看实际效果:https://jsfiddle.net/ksugkmoh/

关于javascript - 滚动页面时背景图像上的视差滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41944740/

相关文章:

javascript - Node.js/jade语法错误: unexpected token ;

javascript - 当在 then 函数内部分配 $scope 值时,数据绑定(bind)不起作用

javascript - 相对于 View 的 Dom 的主干和范围

javascript - 当仅包含一项时,Jquery Change() 不适用于选择框

html - 在下拉菜单选项中添加 CSS 矩形

javascript - 如何使用 jQuery 将 html 附加到 <head>

javascript - jQuery + Full Page + Mobile Menu closing =Unable to preventDefault inside passive event listener

javascript - 如何以最简单的方式在 jQuery 中进行调试?

javascript - 如果 li 类等于则添加超链接

html - 如何在菜单外制作下拉框