Question

我正在尝试为我的网站获得一个不错的视差滚动效果，只要我使用滚动条滚动页面就好了。但是当我使用鼠标滚轮的键盘时 - 它真的是波涛汹涌而且很迟钝。这是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;
    }
}

有人能告诉我为什么它起伏不定？我试图将背景图像调整为较小的一个，但这似乎不是一个问题，因此我严重缺乏法力，不知道我做错了什么。任何帮助，将不胜感激。

Answer 1

我遇到了同样的问题，并找到了解决这个问题的巧妙方法。＆＃34;最后一位开发者＆＃34;发现你必须修复背景位置并对抗滚动方向：

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

这对我来说感觉更顺畅。资料来源：The Last Developer

Answer 2

由于输入不稳定，因此滚动不稳定。使用键盘或鼠标滚轮滚动会使页面跳转。

如果你想要一个很好的过渡，我建议使用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;

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

Answer 3

我很高兴找到一个快速简单的解决方案。安装这个平滑的滚动插件使鼠标滚动超级流畅，消除了juttery / choppy palaxlax问题。 http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/

视差滚动波涛汹涌

3 个答案: