css - 在水平滚动上旋转图像

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 张图片。它们以不同的速度转向相反的方向。我怎样才能做到这一点？我查看了演示站点的源代码并注意到 -webkit-transform。我想这与它有关吗？有人可以帮忙吗？

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

Answer 1

Very simply, just apply a different transform to each element. In the example you give, you have the #rightgear element rotate -theta rads while the #leftgear element rotates theta rads. You can apply a small modifier to one of these to change the speed, like:

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