CSS Transform JQuery анимация не работает должным образом - PullRequest
Новая
       1

CSS Transform JQuery анимация не работает должным образом

1 голос
/ 02 февраля 2012

В ответ на другой вопрос я сделал небольшой фрагмент кода, чтобы анимировать вращение 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;
});

1 Ответ

3 голосов
/ 02 февраля 2012

Вы увеличиваете вращение элемента при прокрутке, но не учитываете, как далеко пользователь прокручивал.

Вам следует переписать свой код, чтобы вместо того, чтобы всегда добавлять или вычитать один градус из поворота, вычислять величину поворота на основе того, как далеко прокрутил пользователь. Таким образом, вы можете установить начальную и конечную точки, где ваш элемент всегда будет вращаться в одном и том же месте.

Обновление

Простой пример того, о чем я говорю, здесь: 

$(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/

...