1

Moods of Norway の古い Web サイトを覚えている人がいるとしたら、ページを (水平方向に) スクロールしているときに、ホイールが前後に回転するトラックがありました。自転車で同様の効果を達成することはできません。

これは私がこれまでに持っているものです:

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

ホイールは、スクロールを開始する1回目の360度回転を行います。それだけです。スクロール中にホイールを回転させる必要があります。さらに、前方に進むときは時計回りに回転し、後ろに戻ったときは反時計回りに回転する必要があります。完璧なアンカーリンクを使用してページをスクロールするときにも機能する場合。

私を助けてください ：）

4

2 に答える 2

2

上記の解決策を試しましたが、少なくとも私にはうまくいきませんでした。私はこれを見つけました、そしてそれはうまくいきます：

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-10-22T17:10:25.647 に答える
0

それを行う方法を見つけましたが、それがどのように機能するかを正確に理解していませんでした..だから、誰かがここで同じ効果を必要とするなら..それでも誰かがそれがどのように機能するか教えてください.. 

<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>
于 2012-03-24T08:54:40.263 に答える