Question

我使用此代码让图片在滚动时旋转，并且效果很好：

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

我使用.scrollLeft代替.scrollTop，因为我的网站是水平滚动的。我从以下代码获得了此代码：http://demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQuery

此网站上的示例有2张图片。它们以相反的方向转向，速度不同。我怎样才能做到这一点？我查看了演示站点的de source并注意到-webkit-transform。我想这跟它有关系吗？有人可以帮忙吗？

我希望我的图像转向另一边，我希望它以较慢的速度转动。

Answer 1

非常简单，只需对每个元素应用不同的变换即可。在您给出的示例中，当#rightgear元素旋转-theta rads时，您有#leftgear个元素旋转theta个rad。您可以将一个小修饰符应用于其中一个以更改速度，例如：

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

在水平滚动上旋转图像

1 个答案: