滾動時的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轉換

回答

相關問題