使用JQuery动画进行视差滚动时出错

Parallax Scrolling with JQuery animation stumbles

本文关键字：滚动 出错 视差 JQuery 动画 使用      更新时间：2023-09-26

我用视频实现了视差效果。我想自己做，所以我在没有任何框架或插件的情况下做了这件事，但它很慢，而且会磕磕碰碰。

我的想法是有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

问题：您可能正在chrome/safari中测试您的网站，尝试使用Firefox，您会发现事情更顺利。

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

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

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

$('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);
相关文章：