スクロール位置に基づくアニメーション

Question

スクロール位置に基づいて要素を（連続して独立して）アニメーション表示しようとしています。

目的は、各要素をループし、ユーザーのスクロール位置に基づいて回転を変更することです。今、各アイテムの回転は常に同じです。これはどのように達成できますか？ここで

はフィドルです：https://jsfiddle.net/nfquerido/wy84pLud/

そして、これはループ機能である：

var _items = function() { 
    forEach(items, function(item) { 
     var scrollTop = _scrollTop(), 
      elementTop = item.offsetTop, 
      documentHeight = _getDocumentHeight(), 
      elementHeight = _getElementHeight(item), 

      // Transform the item based on scroll 
      rotation = (scrollTop/(documentHeight - windowHeight) * 360), 
      transform = 'rotate(' + rotation + 'deg)'; 

     // Elements off the top edge. 
     if (scrollTop > elementTop) { 
      item.classList.add('scrolling'); 
      item.style.webkitTransform = transform; 
     } else { 
      item.classList.remove('scrolling'); 
      item.style.webkitTransform = null; // Reset the transform 
     } 
    }); 
}; 

私はバニラJavaScriptの提案をしてくださいいただければと思います！私は回転VARのあなたの割り当ての上にこの権利を追加

：

Answer 1

私は、これはあなたが探しているの修正だと思う

// Transform the item based on scroll 
    rotationFactor = Math.max(0, scrollTop - elementTop), 
    rotation = (rotationFactor/(documentHeight - windowHeight) * 360), 

彼らそれぞれが自分の相対オフセット回転を取得し、これを交換した後： ）

エラーは、ローテーションの変更/影響を受ける変数がスクロールトップのみであり、ドキュメントレベルでのみ発生するという点です。ここで@Annihilatorは、以下の提案ソリューションのフィドルだ、我々はまた、その違いを含めたい:)