Jquery视差效应

时间:2012-07-30 13:54:01

标签: jquery

我一直在看很多很多paralax教程,对于我实际需要实现的东西来说太复杂了,而且我确信没有插件可以实现一些棘手而简单的方法。

基本上,我想做的就是举例......

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

1 个答案:

答案 0 :(得分:2)

不确定。我有很多想法。这听起来并不复杂。

创建一个超出函数范围的变量。给它命名为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;
});

亲自试试。