0

スクロールで回転させるために jquery/css3 を使用している要素があります。スクロールするとちょっとビクビクして、止まるとすぐ止まるのが難点。スクロール ホイールが動くたびに一定の角度だけ回転するのではなく、スクロールを開始すると開始し、スクロールを停止すると停止するスムーズな再生回転にしたいと考えています。私のコードとリンクは以下の通りです：

http://pollenbrands.com/rjj/ (下にスクロールして 100% フルーツ)

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;
    }
});
4

4 に答える 4

1

.animate を使ってみましたか? これは、この動作を制御するのに役立つ場合があります。

于 2012-04-16T17:18:07.990 に答える
0

これを達成するための粗雑で手っ取り早い方法は、スクロール ハンドラの実行を遅らせることです。

$(window).scroll(function() {
    setTimeout(function(){
        //Call scroll functionality here..
    }, 300);
});
于 2012-04-16T17:28:14.140 に答える
0

スクロール機能にアニメーションを付けているのが問題のようです。ユーザーがスクロールするたびに呼び出されるため、前の変換が終了する前に新しい変換が開始されます。ユーザーが最初にスクロールしたときに、1 つの長いイベント (より大きな角度で回転するなど) を起動してから、最初のイベントが終了する時間があるまで将来のイベントを延期することをお勧めします。イージング関数によっては、フラグを指定して setTimeout() メソッドを使用する場合があります。

于 2012-04-16T17:21:35.680 に答える