jQueryのスクロールやマウスホイールでイメージ（ホイール）を回転させる方法は？

Question

古いMoods of Norwayのウェブサイトを覚えている人は、ページを（水平方向に）スクロールしている間にホイールが前後に回転しているトラックがあります。私はバイクと同様の効果を達成することはできません。

$(window).bind("scroll", function() {  
    $("#wheel1, #wheel2").css({ 
     '-moz-transform':'rotate(360deg)', 
     '-webkit-transform':'rotate(360deg)', 
     '-o-transform':'rotate(360deg)', 
     '-ms-transform':'rotate(360deg)', 
     '-webkit-transition-duration':'3s', 
     '-webkit-transition-delay':'now', 
     '-webkit-animation-timing-function':'linear', 
     '-webkit-animation-iteration-count':'infinite', 
     '-webkit-animation':'rotating 2s linear infinite' 
    }); 
}); 

車輪が第一の時間のために、この360度の回転を作るあなたがスクロールを開始し、それはそれだ：

これは私がこれまでにしたものです。 スクロール中にホイールを回転させる必要があります。さらに、スクロールして前後に動かすと、時計回りに回転する必要があります。完璧になるアンカーリンクを使用してページをスクロールすると、これも機能します。

誰もがここで同じ効果を必要とする場合誰かができれば、それはまだ...あるので .. :)

Answer 1

はそれを行う方法を見つけた私を助けるが、はるかにそれが動作しないかを正確に理解していなかったしてくださいどうすればいいのか教えてください。

<script type="text/javascript"> 

//scroll 
    $(window).scroll(function(e) { 
     var top = $(document).scrollLeft(); 
     var wHeight = Math.max(20000,$(window).height()); 

     var oldPage = actPage; 
     var actPage = Math.floor((top+(wHeight/2))/wHeight); 


     if (actPage == 0) { 
      $('#traktor #wheel2').css({'-webkit-transform':'rotate('+top+'deg)','-moz-transform':'rotate('+top+'deg)','-o-transform':'rotate('+top+'deg)','-ms-transform':'rotate('+top+'deg)','transform':'rotate('+top+'deg)'}); 
      $('#traktor #wheel1').css({'-webkit-transform':'rotate('+top+'deg)','-moz-transform':'rotate('+top+'deg)','-o-transform':'rotate('+top+'deg)','-ms-transform':'rotate('+top+'deg)','transform':'rotate('+top+'deg)'}); 
     } 


    }); 

</script>  

Answer 2

私はあなたに上記の解決策を試みましたが、少なくとも私にとってはうまくいかなかったのです。私はこれを見つけたoneそれは正常に動作します：

var angle = 1; 
jQuery(window).scroll(function() { 
    jQuery(".rotate").css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)'); 
    angle+=6; 
    if(angle==360) { 
     angle=0; 
    } 
});