jquery - 使用 .scroll() 控制变换属性

Question

我是一个 jQuery 初学者，所以我只是在寻找一些提示，以便我可以继续朝着正确的方向跋涉。

我想要发生的是：当用户向下滚动页面时，固定图像会旋转。理想情况下，旋转速度与滚动匹配（快速滚动 = 快速旋转）。

这就是我所在的位置：

$(window).scroll(function () { 
  $("img").css("-webkit-transform","rotate(90deg)") 
});

我知道我需要使用小于 90 度的增量，当然需要更多的供应商前缀，但我这里的主要问题是这只会让图像旋转 90 度一次。至少我希望它笨拙地一遍又一遍地旋转。然后我可以努力让它顺利。

谢谢

Answer 1

您所要求的基本上是任何视差站点将如何工作 - 某些元素与滚动动作相关联。为了使它工作，每次滚动发生时，您都会获得窗口的位置。

起初这将很难让你的头绕起来，但使用那个滚动位置，你会进行计算，然后进入旋转的程度。

通读本教程以更好地了解我对滚动位置的含义。

视差教程