我們知道，普通的網(wǎng)站打開后，就加載了網(wǎng)頁的全部?jī)?nèi)容。當(dāng)用戶下拉時(shí)，顯示屏外的部分�，F(xiàn)在為了讓整個(gè)網(wǎng)站更加動(dòng)感，很多網(wǎng)站都使用了animate動(dòng)畫滑動(dòng)加載網(wǎng)頁效果。當(dāng)用戶下拉網(wǎng)頁時(shí)，屏外部分會(huì)以一個(gè)動(dòng)畫的方法向上滑動(dòng)顯示。

案例網(wǎng)站見：多語言響應(yīng)式機(jī)械公司網(wǎng)站制作案例

如何在自己建網(wǎng)站時(shí)，實(shí)現(xiàn)這樣的animate動(dòng)畫滑動(dòng)加載網(wǎng)頁效果呢？下面介紹一下實(shí)現(xiàn)方法。

方法/步驟

1. 引入animate動(dòng)畫滑動(dòng)加載網(wǎng)頁功能必需的二個(gè)文件：wow.min.js和animate.css；（下載地址：https://pan.baidu.com/s/1TzCE07_PrhXhyCl1xHN-bw 密碼: najk）
2. 將下載下來的二個(gè)文件放到自己的根目錄下，并將以下的代碼放到</head>標(biāo)簽上方進(jìn)行引入；（如果不了解HTML標(biāo)簽，可以學(xué)習(xí)一下html入門教程）
   

   
   <link href="/animate.css" rel="stylesheet">
   
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   
   <script src="/wow.min_.js"></script>
   
   

3. 在</body>標(biāo)簽上方放上以下Jquery代碼：（更多Jquery代碼見：https://www.xuewangzhan.com/jz/jquery/）

   
   <script>new WOW().init();</script>
   
   

4. 給使用對(duì)象添加 class="wow animate名" 這樣的類。animate名可以在這個(gè)網(wǎng)站上查找自己需要的動(dòng)畫效果。地址：http://daneden.github.io/animate.css/
5. 這樣就可以實(shí)現(xiàn)animate動(dòng)畫滑動(dòng)加載網(wǎng)頁功能了。

可用屬性：

data-wow-duration（動(dòng)畫持續(xù)時(shí)間）data-wow-duration="2s"
data-wow-delay（動(dòng)畫延遲時(shí)間） data-wow-delay="5s"
data-wow-offset（偏移量）data-wow-offset="10" 距離可視區(qū)域多遠(yuǎn)開始執(zhí)行動(dòng)畫
data-wow-iteration="10"(重復(fù)次數(shù)) data-wow-iteration="10"

標(biāo)簽： 代碼 公司網(wǎng)站制作 建網(wǎng)站 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。