Ослабление вращения анимации на прокрутке

У меня есть элемент, который я использую 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; 
    } 
});

источник

2012-04-16 PollenBrands

Вы пробовали использовать .animate? Это может помочь вам контролировать это поведение.

источник

2012-04-16 17:18:07 neuDev33

с помощью CSS преобразования на самом деле быстрее, чем функция одушевленным, так как CSS, как правило, аппаратное ускорение. – Jlange

@Jlange, не будет ли это полностью зависеть от типа браузера и операционной системы? – Sparky

Большинство современных браузеров (Firefox, хром, IE) используют аппаратное ускорение для css. Это не зависит от операционной системы, так как сами браузеры написаны для конкретной ОС. (Также из его вопроса он нацеливается на браузеры Mozilla, которые, безусловно, аппаратно ускоряются). – Jlange

Похоже, что проблема может быть связана с анимацией с функцией прокрутки. Он вызывается каждый раз, когда пользователь прокручивает, поэтому он запускает новое преобразование до того, как предыдущий имеет возможность закончить. Возможно, вы захотите запустить более длинное событие (например, повернуть в большей степени), когда пользователь прокручивает первый раз, а затем откладывает любые будущие события, пока первый не успеет закончить. В зависимости от вашей функции ослабления вы можете использовать метод setTimeout() с флагом.

источник

2012-04-16 17:21:35 Jlange

спасибо, проблема в том, что с помощью ослабления анимация замедляется до остановки, а затем запускается снова, поэтому скорость вращения будет непоследовательной. мне бы очень хотелось, чтобы он начал вращаться и удерживал ту же скорость, пока пользователь не перестанет прокручиваться, а затем остановится. – PollenBrands

, тогда вы можете попробовать этот плагин, http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ Это позволит вам определить, когда пользователь прокручивает (как эта функция не является родным для браузера) – Jlange

сырой и быстрый способ достижения этой цели будет задерживать выполнение обработчика скроллинга ..

$(window).scroll(function() { 
    setTimeout(function(){ 
     //Call scroll functionality here.. 
    }, 300); 
});

источник

2012-04-16 17:28:14

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

Я согласен с neuDev33. Используйте анимацию и ослабление функции прокрутки. Что-то вроде easeOutCirc может работать красиво. Здесь есть большой чит-лист.

http://easings.net/

источник

2013-06-25 14:41:26 Jacksnap13

Ослабление вращения анимации на прокрутке

ответ

Смежные вопросы