我一直在看很多很多paralax教程,对于我实际需要实现的东西来说太复杂了,而且我确信没有插件可以实现一些棘手而简单的方法。
基本上,我想做的就是举例......
火箭飞船。在空间背景。当用户向下滚动时,火箭飞船将以滚动速度的两倍或一半滚动。在x或y?有没有人有任何想法?
答案 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;
});
亲自试试。