視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。隨着用戶對視覺體驗的要求不斷提高，WEB開發者開始在網頁中加入各種特效元素以滿足用戶的需求。今天這篇文章給大家推薦一個優秀的視差動畫Javascript庫——Skrollr.js
Skrollr是一個使用了HTML5和CSS3的輕量級JavaScript視差滾動類庫。它是不依賴於其它框架的獨立類庫，可以讓你快速打造出視差滾動效果。它可以讓我們給任意元素設置關鍵幀的CSS屬性，然後它會自動形成動畫效果。更重要的一點是，使用此類庫時不用寫複雜的JS代碼以及兼容主流瀏覽器，適配手機等移動終端等特性。
如何使用？
首先在頁面</body>前加入skrollr庫，可以在https://github.com/Prinzhorn/skrollr#rd下載到最新的庫文件。然後使用skrollr.init()調用skrollr庫。
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
</body>
接着，我們來演示下頁面元素背景顏色變化效果。當用戶向下滾動頁面500像素時，div的背景色由#00f漸變爲#f00。
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
請看演示：demo1
注意，不能使用#00f或者#0000ff來定義背景顏色，應該使用rgb來定義顏色值，當然你不必擔心低版本的ie瀏覽器不支持rgb，skrollr已經做了兼容性處理。
下面我們來看下轉動效果，使用transform:rotate(0deg)可以讓頁面元素產生轉動，下面的演示當滾動頁面時div會做360度轉動效果。
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);"
data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>
請看演示：demo2
skrollr庫還提供了非線性動畫調用及彈性緩衝效果，可以使用easings選項中的緩存函數如：bounce，swing等。
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"
data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
請看演示：demo3
接下來我們把“data-500”換成了“data-top”！skrollr不僅可以處理絕對位置，也可以處理相對位置！
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"
data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
請看演示：demo4
從上面幾個例子中我們可以看出，使用元素的屬性：data-xxx，添加多個這樣的屬性，skrollr居然可以自動創建動畫過程。
在設置data-xxx時，skrollr提供了相對(relative)和絕對(absolute)視圖兩種方法，請看圖解：
Skrollr提供了豐富的使用說明文檔，以及javascript方法解說，詳情可以閱讀項目官網：https://github.com/Prinzhorn/skrollr，同時本站將會推出更豐富的Skrollr應用效果頁面講解文章，敬請期待！
