Question

我陷入了视差问题，似乎无法找到我想要的东西。

我的页面顶部有背景图片。我目前有ThreadLocal所以它有视差效果但是我需要这个图像在页面滚动时滚动？ ......现在我被卡住了。

我相信这可以通过JavaScript完成，可能background-position: fixed，但我不知道从哪里开始。

在我的基本小提琴中，您可以看到视差效果，但我需要在页面滚动时滚动图像。

感谢您的帮助。

background-position: scroll

.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');
}

Answer 1

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

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

在滚动页面时，视差滚动背景图像

1 个答案: