Элементы 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)"); 
      } 
     }); 

}); 

Fiddle Добавлено: https://jsfiddle.net/2bos5oqh/4/

Answer 1

ли анимация есть анимация-продолжительность? Если это так, есть вероятность, что событие прокрутки запускается несколько раз, прежде чем одно обновление будет завершено.

Попробуйте дребезг функции https://davidwalsh.name/javascript-debounce-function