使用JQuery动画的视差滚动失败

Question

我已经用视频实现了视差效果。 我想自己做，所以我没有任何框架或插件就完成了，但是它很慢而且偶然发现。

我的想法是在它们前面有2张图片，1个视频和2个框。 所以我的代码是，如果我位于1张图片的位置，则图片的滚动速度会变慢（边缘为上），如下所示：

$( 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，您会发现事情更加顺利。

原因：在某些浏览器中，当您滚动时，它们会一次跳100px，因此您的视差动画开始看起来很奇怪。

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

Answer 2

问题是图像/视频太大，滚动时浏览器在完全加载之前滞后。 一种解决方案是在显示页面之前等待图像/视频完成加载。

$('body').hide();

var video = document.getElementById('PARALLAX_bild2');

video.addEventListener('loadeddata', function() { // video is loaded
   $('img').load(function() { // images are loaded
     // Do some fancy fade in of the page here. This is just an example.
     $('body').show();
   });
}, false);