CSS3滚动变换

Question

有人知道如何实现这一目标的好教程吗？（如此所见：http://www.contrastrebellion.com/）我已经查看了该站点使用的代码，但发现很难提取我需要的内容。

非常感谢， 谢谢

编辑：还可以在这里看到：http://playgroundinc.com/

我的目标：

随着向下滚动，旋转 png 并使旋转速度与滚动速度相匹配。

- malicedix

Answer 1

这应该会帮助你朝着正确的方向前进：http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/。

以下是相关内容：

要在滚动中实现旋转动画，可以使用以下代码：http://jsfiddle.net/EnSkJ/2/。

var sdegree = 0;

$(window).scroll(function() {

    sdegree ++ ;
    sdegree = sdegree + 3 ;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
});

- Infra Stank

---

谢谢，我会仔细查看的。不过我不确定它是否能直接实现我的需求，因为我想要在向下滚动时旋转一个PNG，并使其速度与滚动速度匹配，而不是移动图像层以获得视差效果。 - malicedix

更新了答案并提供了一个 fiddle，它不是完美的，但可以给你基本的了解。 - Infra Stank

当你滚动回顶部时，是否有可能始终保持正确的方式？ - malicedix

是的，我不得不问一个问题才能解决它 :) http://jsfiddle.net/EnSkJ/5/ - Infra Stank

Answer 2

当然，你可以像Infra Stank's answer那样使用简单的方法。但是如果你需要一个更复杂的东西来“动画”，尝试使用jQuery Transe。它是一个彻底的解决方案，可以解决这个问题。你可以根据当前滚动偏移量改变几乎任何东西（甚至是CSS3-Transforms等等）。

在你的情况下，尝试像这样：

$('img').transe({
    start: 0,
    end: 1600,
    css: 'transform',
    from: 'rotate(0deg)',
    to: 'rotate(360deg)'
});

演示

顺便说一下：如果你喜欢流畅的效果，可以使用TweenLite和它的CSS插件。

- yckart