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

Question

I have implemented a parallax effect with a video. I wanted to do it for my own so I did it without any framework or plugin but it is slow and it stumbles around.

My idea was that there are 2 pictures, 1 video and 2 boxes in front of them. So my code was that if i am on the position of the 1 picture, the pictures scroll slower (with margin-top) like this:

$( 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);
        }

      }
   }

But if I scroll down it doesn't work.

Here is the online version: http://p-goetz.de/Parallax.html

Answer 1

Problem: You are probably testing your website in chrome/safari, try using Firefox you will notice that the things are smoother.

Reason: In some browsers when you scroll they jump 100px at once hence your parallax animation start looking odd.

Solution: Try to use a custom scroll with smooth fx.I will recommend Nicescroll .

Answer 2

The issue is the images/videos are so large, the browser lags when scrolling before they are completely loaded. One solution would be to wait for the images/videos to finish loading before presenting the page.

$('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);