滚动时的CSS3转换

有谁知道一个很好的教程来实现这个吗？（如在这里看到：http://www.contrastrebellion.com/）我已经看过在该网站上使用的代码，并发现它拉出我需要的尴尬。滚动时的CSS3转换

大加赞赏，感谢

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

我想达到的目标：

要为我向下滚动旋转PNG和旋转的速度以匹配滚动速度。

来源

2012-02-02 malicedix

有趣的网站。 – 2012-02-02 13:47:14

这应该让你朝着正确的方向前进：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}); 
});

来源

2012-02-02 13:54:37

谢谢，我会仔细研究一下。我不确定是否会直接实现我想要的，但是因为我只是在向下滚动时旋转PNG，并且速度与滚动速度相匹配，而不是移动图层以获得视差效果。 – malicedix 2012-02-02 13:57:34

用小提琴更新了答案，它不完美，但给了你基本知识。 – 2012-02-02 14:45:17

非常感谢，非常感谢！ – malicedix 2012-02-02 16:15:20

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

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

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

Demo

顺便说一句：如果你喜欢光滑的东西，你可以包括TweenLite其CSS-插件。

来源

2013-02-22 12:29:31 yckart

首先，看看this site并享受体验。我想你在你的项目中要求这样的经验。在该页面的结尾处，您将看到一个jQuery插件在您的项目（站点）中实现该插件。希望它能解决您的问题。

来源

2013-03-06 17:22:32 mukilane

滚动时的CSS3转换

回答

相关问题