我正在研究一个项目的视差效果,虽然我的所有动画效果很好,但滚动驱动的效果通常会因输入设备而断断续续。
由于性能原因,我最终使用请求动画帧(RAF)来检查每个动画循环的页面偏移量,而不是使用基本的`.scroll()事件。然而,使用其中之一,如果我注销事件接收的偏移/滚动位置值,它们通常相对于滚轮/球与跟踪板相隔很远。因为动画是滚动/偏移驱动,这会导致卡顿。
例如,跟踪板触发许多事件,每个事件的偏移值之间只有几个像素差异,而滚轮/球触发较少的事件,具有5-15个像素的差异(取决于滚动速度),导致一个不太流畅的动画。
你可以在this guys fiddle上自己愚弄这个:
$(window).scroll(example);
function example() {
var tempScrollTop = $(window).scrollTop();
console.log("Scroll from Top: " + tempScrollTop.toString());
};
任何人都知道一个很好的库或方法来平滑这些滚动事件及其偏移量?我知道这是可能的,因为我已经看过视差网站,无论输入如何,动画都很好而且流畅,但我无法弄清楚它是如何管理的。感谢。