如何使经典的jQuery视差更加平滑

Question

我有一个像这样的经典jQuery视差

$(window).scroll(function () {
  parallax();
});
var offset;
$(document).ready(function(){
  var p = $( ".content" );
  var offset = p.offset();
  var offset = offset.top;
});
function parallax() {
  render($(document).scrollTop());
}
function render(ev) {
  var t = ev;
  var y = Math.round(t * .25);
  $('.content').css('bottom', - y - 100 + 'px');
}

有没有办法使其更平滑？

Answer 1

您可能需要尝试在.content元素上添加transition。

.content{
  transition: bottom 0.3s linear;
}

您需要以与过渡中指定的间隔相同的间隔来触发视差函数。

尝试以相同的间隔发射视差功能：

var interval;
var timeout;
$(window).scroll(function(event){
  //prevent from stopping the interval
  clearTimeout(timeout);
  //execute parallax every 300ms => same as transition
  if(!interval){
    parallax();
    interval = setInterval(function(){
      parallax();
    }, 300);
  }
  //stops the interval after you stopped scrolling for x amount of time
  timeout = setTimeout(function(){
    clearInterval(interval);
    interval = null;
  }, 300);
});