Skrollr中怎么創(chuàng)建視差滾動效果

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

首先在頁面</body>前加入skrollr庫，可以在https://github.com/Prinzhorn/skrollr#rd下載到最新的庫文件。然后使用skrollr.init()調(diào)用skrollr庫。

<script type="text/javascript" src="skrollr.min.js"></script>    <script type="text/javascript">    var s = skrollr.init();    </script> </body>

接著，我們來演示下頁面元素背景顏色變化效果。當(dāng)用戶向下滾動頁面500像素時(shí)，p的背景色由#00f漸變?yōu)?f00。

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

請看演示：demo1

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

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

<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庫還提供了非線性動畫調(diào)用及彈性緩沖效果，可以使用easings選項(xiàng)中的緩存函數(shù)如：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>

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