jquery 监听元素滚动_在jQuery中使用页面滚动来旋转元素

jquery 监听元素滚动

Just a small effect, but one I’ve always found rather compelling; created using JQuery, in this case, for speed and simplicity. Very often this effect will be applied to elements given a fixed position on the page: Aaron Harun’s blog has a good example of this, for example. In the case of this article, I’ve made the elements rotate with the page due to space considerations.

只是一个很小的效果，但是我一直觉得很引人注目。 在这种情况下，使用JQuery创建的对象是为了提高速度和简化操作。 通常，这种效果将应用于页面上固定位置的元素：例如， Aaron Harun的博客中有一个很好的例子。 就本文而言，出于空间考虑，我使元素随页面旋转。

The script itself could not be simpler:

脚本本身再简单不过了：

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

A brief explanation: .scroll captures the scrollbar being moved, and scrollTop is how much the scrollbar has been moved down from its uppermost position. % is the JavaScript modulo operator: that is, it returns the remainder after division of one value (the amount the scrollbar has been moved, in this case) by another (π). The result is then applied to the rotation of an element via a CSS rotate transform, using the slightly unusual (at least in CSS) radians unit. (1 radian is the arc of a circle with the same length as the radius of that same circle, i.e. just under 57.3 degrees. A complete circle – and thus a complete revolution – corresponds to 2π radians).

简要说明： .scroll捕获要移动的滚动条， scrollTop是滚动条从其最高位置向下移动了多少。 %是JavaScript 模运算符：也就是说，它在将一个值(在这种情况下，滚动条已移动的量)除以另一个值(π)之后返回余数 。 然后，使用稍微不寻常的(至少在CSS中 ) radians单位通过CSS旋转变换将结果应用于元素的旋转 。 (1 弧度是一个圆的弧，其长度与该圆的半径相同，即小于57.3度。一个完整的圆，即一个完整的公转，对应于2π弧度)。

So if the scrollbar is moved down 10 pixels, theta will be whatever is left over from 10 divided by π. 3.14 * 3 is 9.42, leaving 0.58 as the modulus, or a little over 33 degrees as measured in radians. Thus the gears (built using responsive SVG) will rotate roughly 33 degrees with every 10 pixels of page scroll.

因此，如果滚动条下移10个像素，则theta将是10除以π剩下的值。 3.14 * 3为9.42，以0.58为模数，或者以弧度为单位略高于33度。 因此，这些齿轮(使用响应式SVG构建)将随着页面滚动的每10个像素旋转大约33度。

翻译自: https://thenewcode.com/718/Rotating-Elements-With-Page-Scroll-In-JQuery

jquery 监听元素滚动