Skrollr中怎么創(chuàng)建視差滾動(dòng)效果-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)專注于古塔網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供古塔營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，古塔網(wǎng)站制作、古塔網(wǎng)頁(yè)設(shè)計(jì)、古塔網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)服務(wù)，打造古塔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供古塔網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

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

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

接著，我們來(lái)演示下頁(yè)面元素背景顏色變化效果。當(dāng)用戶向下滾動(dòng)頁(yè)面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>

請(qǐng)看演示：demo1

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

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

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

請(qǐng)看演示：demo2

skrollr庫(kù)還提供了非線性動(dòng)畫(huà)調(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>

請(qǐng)看演示：demo3

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

<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)建視差滾動(dòng)效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)題目：Skrollr中怎么創(chuàng)建視差滾動(dòng)效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://bm7419.com/article40/dsdieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)