视差滚动断断续续

Parallax scrolling choppy

本文关键字：断断续续 滚动 视差      更新时间：2023-09-26

我正在尝试为我的网站获得漂亮的视差滚动效果，只要我使用滚动条滚动页面，它看起来不错。但是当我使用鼠标滚轮的键盘时 - 它真的很断断续续和滞后。这是负责视差的JS的一部分。

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

有人可以告诉我为什么它断断续续吗？我试图将背景图像的大小调整为较小的图像，但这似乎不是问题，因此我严重耗尽了法力，不知道我做错了什么。任何帮助将不胜感激。

我遇到了同样的问题，并找到了一个巧妙的技巧来解决这个问题。"最后一个开发人员"发现您必须固定背景位置并反对滚动方向：

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp*-1 + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

将此 css 用于您的div

background-attachment: fixed;

这对我来说肯定感觉更顺畅。来源：最后的开发者

滚动是断断续续的，因为输入是断断续续的。使用键盘或鼠标滚轮滚动会使页面跳转。

如果你想要一个很好的过渡，我建议使用CSS3过渡。

它们非常容易设置并且可插拔;你可以将它们弹出到现有的（断断续续的）过渡中，它突然变得流畅。

我不是 100% 确定您可以在background-position上过渡，但如果可以的话

，这就是您的做法： 
transition: .15s ease-in-out;
transition-property: background-position;

为了兼容，请添加：

-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
-webkit-transition-property: background-position;
-moz-transition-property: background-position;
-o-transition-property: background-position;

当然，还有更多的选择和花里胡哨的东西，但这应该让你开始。

我很高兴

找到一个快速简便的解决方案。安装这个平滑滚动插件使鼠标滚动超级流畅，并消除了抖动/不稳定的视差问题。http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/

相关文章：