使用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);