div要素が逆方向に移動するとジッタがスクロールする

Question

スクロール時に各画像を反対方向に移動させるスクロールエフェクトを作成しています。私はこれを達成しましたが、あなたがスクロールするほど、スクロールは滑らかでなくなり、ジッターが増します。

私は、イメージ（アイテム）ごとにビューポートの上部から常に距離が離れているからだと思います。誰もこれを回避する方法を知っていますか？

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/

Answer 1

は、アニメーションはアニメーションの期間を持っていますか？もしそうなら、単一の更新が完了する前にスクロールイベントが複数回発生している可能性があります。

は https://davidwalsh.name/javascript-debounce-function