1

別の質問への回答で、ページを下にスクロールしたときに PNG の回転をアニメーション化する簡単なコードを作成しました。それはうまくいきましたが、アップスクロールでアニメーションを反転すると正しく機能しませんでした。

PNG が元の位置に戻ることが予想されますが、数ピクセル不足しています。

フィドル: http://jsfiddle.net/EnSkJ/3/

コード:

var sdegree = 0;


var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       sdegree += 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   } else {
      sdegree -= 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   }
   lastScrollTop = st;
});
4

1 に答える 1

3

スクロール時に要素の回転を増やしていますが、ユーザーがどれだけスクロールしたかを考慮していません。

常に回転から1度を加算または減算するのではなく、ユーザーがスクロールした距離に基づいて回転量を計算するように、コードを書き直す必要があります。このようにして、要素が常に同じ回転になる開始点と終了点を設定できます。

アップデート

私が話していることの簡単な例はここにあります：

$(window).scroll(function(event){
   var srotate = "rotate(" + $(this).scrollTop() + "deg)";
   $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
});

これがデモです：http：//jsfiddle.net/EnSkJ/4/

このコードはスクロール位置に基づいて要素を回転させるため、回転は同じスクロール位置で常に同じになります。

アップデート

また、使用されているブラウザを検出し、適切なベンダープレフィックスtransformプロパティのみを更新できます。

var venderPrefix = ($.browser.mozilla) ? '-moz-' :
                   ($.browser.webkit) ? '-webkit-' : 
                   ($.browser.msie) ? '-ms-' : 
                   ($.browser.opera) ? '-o-' : '';

$(window).scroll(function(event){
   $("img").css(venderPrefix + "transform", "rotate(" + $(this).scrollTop() + "deg)");
});

これがデモです：http：//jsfiddle.net/EnSkJ/6/

于 2012-02-02T19:36:50.573 に答える