0

スクロール時に画像を回転させるためにこのコードを使用していますが、うまく機能しています:

    <script>
$(window).scroll(function() {
var theta = $(window).scrollTop() % Math.PI;
$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
$('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
});
</script>

私のサイトは水平方向にスクロールするので、.scrollTop の代わりに .scrollLeft を使用します。このコードはhttp://demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQueryから取得しました。

このサイトの例には 2 つの画像があります。それらは反対方向に、異なる速度で回転しています。どうすればこれを達成できますか?デモ サイトのソースを調べたところ、-webkit-transform. ひょっとしてこれが関係してるの?誰か助けてくれませんか?

画像を反対側に回転させ、より遅い速度で回転させたい.

4

1 に答える 1

0

非常に簡単に言えば、各要素に異なる変換を適用するだけです。あなたが与える例では、#rightgear要素がラドを回転させ-thetaている間、#leftgear要素をラドを回転させthetaます。これらのいずれかに小さな修飾子を適用して、次のように速度を変更できます。

<script>
    $(window).scroll(function() {
        var theta = $(window).scrollTop() % Math.PI;
        $('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
        $('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
        $('#slowgear').css({ transform: 'rotate(' + 0.25*theta + 'rad)' });
        $('#fastgear').css({ transform: 'rotate(' + 10*theta + 'rad)' });
    });
</script>
于 2014-08-29T20:33:22.700 に答える