javascript - 视差滚动与 JQuery 动画绊倒

Question

我用视频实现了视差效果。我想自己做，所以我在没有任何框架或插件的情况下完成了它，但速度很慢，而且到处乱跑。

我的想法是，他们面前有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);
        }

      }
   }

但是如果我向下滚动它就不起作用了。

这是在线版本:http://p-goetz.de/Parallax.html

Answer 1

问题:您可能在 chrome/safari 中测试您的网站，尝试使用 Firefox，您会发现事情更流畅。

原因:在某些浏览器中，当您滚动时它们会立即跳跃 100 像素，因此您的视差动画开始看起来很奇怪。

解决方案:尝试使用具有平滑效果的自定义滚动。我会推荐 Nicescroll .