在水平滚动上旋转图像答案

【问题标题】：rotate image on horizontal scroll在水平滚动上旋转图像
【发布时间】：2014-08-30 04:33:22
【问题描述】：

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

    <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。我想这与它有关吗？有人可以帮忙吗？

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

【问题讨论】：

标签： css scroll rotation webkit-transform

【解决方案1】：

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

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

【讨论】：