Skrollr中怎么創建視差滾動效果

這篇文章給大家介紹Skrollr中怎么創建視差滾動效果，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

首先在頁面</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像素時，p的背景色由#00f漸變為#f00。

<p data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</p>

請看演示：demo1

注意，不能使用#00f或者#0000ff來定義背景顏色，應該使用rgb來定義顏色值，當然你不必擔心低版本的ie瀏覽器不支持rgb，skrollr已經做了兼容性處理。

下面我們來看下轉動效果，使用transform:rotate(0deg)可以讓頁面元素產生轉動，下面的演示當滾動頁面時p會做360度轉動效果。

<p data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</p>

請看演示：demo2

skrollr庫還提供了非線性動畫調用及彈性緩沖效果，可以使用easings選項中的緩存函數如：bounce，swing等。

<p 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</p>

請看演示：demo3

接下來我們把“data-500”換成了“data-top”！skrollr不僅可以處理絕對位置，也可以處理相對位置！

<p 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</p>

關于Skrollr中怎么創建視差滾動效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。