我用视频实现了视差效果。我想自己做,所以我在没有任何框架或插件的情况下完成了它,但速度很慢,而且到处乱跑。
我的想法是,他们面前有2张图片,1个视频和2个盒子。所以我的代码是,如果我在第 1 张图片的位置,图片滚动速度会变慢(带有 margin-top),如下所示:
$( window ).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll>470){
scroll = scroll-470;
var scrollSlow = scroll*0.4;
$('#Picture1').css('margin-top', scrollSlow);
$('#InfoBox1').css('margin-top', -scroll);
if(scroll<400){
$('#Picture2').css('margin-top', -scroll);
}
$('#InfoBox2').css('margin-top', -scroll+heightPX);
if(scroll<900){
$('#Picture3').css('margin-top', -scroll+heightPX);
}
}
}
但是如果我向下滚动它就不起作用了。
最佳答案
问题:您可能在 chrome/safari 中测试您的网站,尝试使用 Firefox,您会发现事情更流畅。
原因:在某些浏览器中,当您滚动时它们会立即跳跃 100 像素,因此您的视差动画开始看起来很奇怪。
解决方案:尝试使用具有平滑效果的自定义滚动。我会推荐 Nicescroll .
关于javascript - 视差滚动与 JQuery 动画绊倒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23298599/