這篇文章給大家介紹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中怎么創建視差滾動效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網頁題目：Skrollr中怎么創建視差滾動效果-創新互聯
轉載注明：http://vcdvsql.cn/article40/dsdieo.html

成都網站建設公司_創新互聯，為您提供網站策劃、外貿網站建設、軟件開發、品牌網站建設、電子商務、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯