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

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

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

方法/步驟

1. 引入animate動畫滑動加載網(wǎng)頁功能必需的二個文件：wow.min.js和animate.css；（下載地址：https://pan.baidu.com/s/1TzCE07_PrhXhyCl1xHN-bw 密碼: najk）
2. 將下載下來的二個文件放到自己的根目錄下，并將以下的代碼放到</head>標簽上方進行引入；（如果不了解HTML標簽，可以學(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>標簽上方放上以下Jquery代碼：（更多Jquery代碼見：https://www.xuewangzhan.com/jz/jquery/）

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

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

可用屬性：

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

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

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