如何使经典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);
});

如何使经典jQuery视差更平滑

How to make classic jQuery parallax more smooth

javascript

jquery

css

parallax