javascript 视差滚动断断续续
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20001584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parallax scrolling choppy
提问by bagienny
I'm trying to get a nice parallax scrolling effect for my website, and as long as I scroll the page using scrollbar it seems nice. But when I use keyboard of mouse scroll wheel - it's really choppy and laggy. Here's a portion of JS that's responsible for the parallax.
我正在尝试为我的网站获得一个很好的视差滚动效果，只要我使用滚动条滚动页面，它看起来就不错。但是当我使用鼠标滚轮键盘时 - 它真的很不稳定和滞后。这是负责视差的 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;
}
}
Can someone tell me why is it choppy? I tried to resize the background-image to a smaller one, but that doesn't seem to be an issue here and therefore I'm seriously out of mana, don't know what I'm doing wrong. Any help would be appreciated.
谁能告诉我为什么它是断断续续的？我试图将背景图像的大小调整为较小的，但这在这里似乎不是问题，因此我的法力严重不足，不知道我做错了什么。任何帮助，将不胜感激。
回答by Niksac
i came across the same issue and found a neat trick to solve this. "The last developer" found out you have to fix the background position and work against the scrolling direction:
我遇到了同样的问题，并找到了一个巧妙的技巧来解决这个问题。“最后一个开发人员”发现您必须修复背景位置并逆滚动方向工作：
$(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;
}
}
Use this css for your div
将此 css 用于您的 div
background-attachment: fixed;
This definetly feels a lot smoother to me. Source: The Last Developer
这对我来说肯定感觉更顺畅。资料来源：最后的开发者
回答by Halcyon
The scrolling is choppy because the input is choppy. Scrolling with the keyboard or mouse wheel makes the page jump.
滚动不稳定，因为输入不稳定。使用键盘或鼠标滚轮滚动可使页面跳转。
If you want a nice transition I would recommend using CSS3 transitions.
如果你想要一个漂亮的过渡，我会推荐使用 CSS3 过渡。
They're surprisingly easy to set up and are plugable; you can pop them onto an existing (choppy) transition and it suddenly becomes fluid.
它们非常容易设置并且可以插入；您可以将它们弹出到现有的（断断续续的）过渡中，它会突然变得流畅。
I'm not 100% sure you can put a transition on background-position, but if you can this is how you'd do it:
我不是 100% 确定您可以在 上进行转换background-position，但如果可以，您可以这样做：
transition: .15s ease-in-out;
transition-property: background-position;
For compatibility add:
为了兼容性添加：
-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;
Of course there are many more options and bells and whistles, but this should get you started.
当然还有更多的选择和花里胡哨的东西，但这应该能让你开始。
回答by LiveSource
I was glad to find a quick and easy fix to this. Installing this smooth scrolling plugin makes mouse scrolling super smooth and eliminates juttery/choppy parallax problems. http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/
我很高兴找到一个快速简单的解决方法。安装这个平滑滚动插件可以使鼠标滚动超级平滑并消除抖动/断断续续的视差问题。http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/
