我正在创建一个滚动效果,使每个图像在滚动时朝相反的方向移动。我已经做到了这一点,但滚动得越久,滚动就越不平滑,越不稳定。
我相信这是因为我不断地从每个图像(项目)的视口顶部获得距离。有人知道怎么解决这个问题吗?
var $animatedEls = $(".block-inner");
$(window).scroll(function(e) {
e.preventDefault();
var scrollTop = $(window).scrollTop();
var offset = 0;
// Loop through each image (.block-inner)
$.each($animatedEls, function(i, item) {
// Get offset for each .inner-block
offset = $(item).offset().top - scrollTop;
console.log(i+') '+offset);
// Apply to every second item
if (i % 2) {
$(item).css("transform","translateY(-" + (offset/20) + "px)");
} else {
$(item).css("transform","translateY(" + (offset/20) + "px)");
}
});
});
提琴添加:https://jsfiddle.net/2bos5oqh/4/
动画是否有动画持续时间?如果是这样,则可能在单个更新完成之前多次触发滚动事件。
尝试取消该函数https://davidwalsh.name/javascript-debounce-function