Как сделать так, чтобы изображение (колесо) вращалось при прокрутке или колесе мыши в jQuery? - PullRequest
Новая
       50

Как сделать так, чтобы изображение (колесо) вращалось при прокрутке или колесе мыши в jQuery?

1 голос
/ 17 марта 2012

Если кто-нибудь помнит старый сайт 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 градусов в первый раз, когда вы начинаете прокручивать, и все.Мне нужно, чтобы колеса вращались во время прокрутки, плюс мне нужно, чтобы они вращались по часовой стрелке при движении вперед и против часовой стрелки при прокрутке назад.Если это также сработает, когда вы будете прокручивать страницу с помощью привязанных ссылок, это будет идеально.

Пожалуйста, помогите мне:)

Ответы [ 2 ]

2 голосов
/ 22 октября 2012

Я пробовал использовать вышеуказанное решение, но оно не помогло мне, по крайней мере.Я нашел этот один , и он отлично работает: 

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;
    }
});
0 голосов
/ 24 марта 2012

Узнал, как это сделать, но не очень понял, как именно это работает .. Так что, если кому-то нужен такой же эффект, вот он ... Если кто-то может сказать мне, как это работает, пожалуйста ... 

<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>
...