1

If anyone remembers the old Moods of Norway website, there was a track with wheels spinning forward and backward while you were scrolling the page (horizontally). I can't achieve similar effect with a bike.

This is what I have so far:

$(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' 
    });
});

The wheels make this 360 degree rotation for 1st time you start scrolling and that's it. I need the wheels to rotate while you scroll, plus I need them to rotate clockwise when you move forward and anticlockwise when you scroll back. If that would also work when you scroll the page using anchored links that would be perfect.

Please help me out :)

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
user1275640
  • 11
  • 1
  • 2
  • Wouldn't animated gifs be a more light solution? – Joop Eggen Mar 17 '12 at 11:22
  • Ah, all those browser-specific properties! Just as an aside, if you can't get this to work in CSS, you've always got SVG - look at Raphaël if you want to use it with JS. – halfer Mar 17 '12 at 11:51
  • I do want to achieve this effect with JS.. I'll look this library, I guess it may help somehow, I've never heard of it. Thanks a lot for suggestion – user1275640 Mar 22 '12 at 13:03
  • I would use animated gifs but i need the moving to run according to the scroll – user1275640 Mar 22 '12 at 13:06

2 Answers2

2

I tried you above solution but it didn't work for me at least. I found this one and it works fine:

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;
    }
});
Community
  • 1
  • 1
Mikeumus
  • 3,570
  • 9
  • 40
  • 65
0

Found out how to do it, but didn't much understand how exactly does it work.. So if anyone needs same effect here it is.. Still if somebody can tell me how it works, please.. 

<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>
user1275640
  • 11
  • 1
  • 2