Question

我正试图在js中制作一个简单的视差效果。

有我的代码：

function parallax(){
    $(".parallax").css("backgroundPosition","50% "+$(document).scrollTop()+"px");
}
parallax();
$(window).scroll(function() {
    parallax();
});

https://jsfiddle.net/makitos666/whb6Ldup/3/

它功能齐全，但我遇到了性能问题。当我使用鼠标滚轮进行滚动时，可以进行100px步骤，并且一切正常。但是，当我使用触摸板或智能手机等可触摸输入时，会有更多精确度，并且滚动事件会被触发很多次。在我的笔记本电脑上一切正常，但如果你使用慢速电脑或Android手机，效果会非常滞后。

你知道这是否可能吗？或者我需要改变一切吗？

或者，如果你知道一些响应和移动友好的图书馆这种效果，我也很感兴趣。

非常感谢！

Answer 1

好吧，经过我自己调查的不同时间，这是我的结论：

JS OnScroll事件不是制作重叠视差效果的最佳方式，这只适用于专用图形卡，而且不适用于（对我来说）。

解决方案是：https://codepen.io/keithclark/pen/JycFw（由keithclark提供）

.slide {
  position: relative;
  padding: 25vh 10%;
  width: 100%;
  height: 100%;
}
#slide1:before {
  background-image: url("http://lorempixel.com/640/480/abstract/4/");
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

#slide2 {
  background-image: url("http://lorempixel.com/640/480/abstract/3/");
  background-attachment: fixed;
}

纯CSS视差效果。与我的相同，但更有效。如果你知道另一个解决方案，我想知道它！ ;）

<强>更新

嗯，这个解决方案有效，但似乎backbround-attachment：fixed在Android手机中效果不佳。仍在寻找解决方案。

JQuery Parallax效果。 OnScroll事件非常滞后

1 个答案: