jquery - jQuery视差效果

Question

我一直在看很多很多视差教程，对于我实际需要实现的目标来说太复杂了，而且我确信在没有插件的情况下有一些棘手但更简单的方法可以做到这一点。

基本上，我想做的就是拥有例如..

一艘火箭飞船。在空间背景上。当用户向下滚动时，火箭飞船会以两倍或一半的速度滚动。在 x 或 y 中？有没有人有任何想法？

Answer 1

当然。我有很多想法。这听起来并不过分复杂。

在函数范围之外创建一个变量。给它起一个名字last_position，给它一个值0。

var last_position = 0;

现在捕获滚动事件。

$(window).scroll(function(){

});

现在，捕捉我们从滚动顶部到的距离。将此变量保存到 last_position 变量中，并创建一个 if 语句。

$(window).scroll(function(){
  var winTop = $(this).scrollTop(); 
  if(winTop > last_position){
    //we're scrolling down
  }else{
    //we're scrolling up
  }
  //update last_position here
  last_position = winTop;
});

不，在这些 if 语句中，用于分别.animate()设置top & left距离。用任何数学计算你想达到你想要的效果。重要的是要注意，.stop()在再次调用它之前，您需要每个动画。如果你不......好吧，你会明白为什么......

$(window).scroll(function(){
  var winTop = $(this).scrollTop(); 
  if(winTop > last_position){
    $('#spaceship').stop(true).animate({
      top: "+=15px",
      left: "-=15px"
    });
  }else{
    $('#spaceship').stop(true).animate({
      top: "-=15px",
      left: "+=15px"
    });
  }
  //update last_position here
  last_position = winTop;
});

自己尝试一下。