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
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 .
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.