當前位置:主頁 -> 網絡知識 -> 網絡課堂>> 超好用的WOW.js+Animate.css網站動畫特效使用說明

超好用的WOW.js+Animate.css網站動畫特效使用說明

來源: 發布時間:2018-03-07 02:07:49


今天滕州網站制作小編發現了一款炫酷的網頁滾動特效:WOW.js 在網站制作中滾動頁面時會展示各式各樣的動畫效果。
有的頁面在向下滾動的時候,有些元素會產生細小的動畫效果。雖然動畫比較小,但卻能吸引你的注意。如果你希望你的頁面也更加有趣,那么你可以試試 WOW.js。

WOW.js 依賴 animate.css,所以它支持 animate.css 多達 60 多種的動畫效果,能滿足您的各種需求,還可以通過設置調整可以改變動畫的風格、延遲、偏移量等。


瀏覽器兼容

網頁滾動特效之WOW.JS的使用方法網頁滾動特效之WOW.JS的使用方法網頁滾動特效之WOW.JS的使用方法網頁滾動特效之WOW.JS的使用方法網頁滾動特效之WOW.JS的使用方法
IE10+ ?Chrome ?Firefox ?Opera ?Safari ?

IE6、IE7 等老舊瀏覽器不支持 CSS3 動畫,所以沒有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本會報錯。為了達到更好的兼容,最好加一個瀏覽器及版本判斷。

使用方法:

1、引用動畫樣式文件Animate.css

  1. <link rel="stylesheet" href="css/animate.css">

2、加載激活WOW.js

  1. <script src="js/wow.min.js"></script>

  2. <script>

  3. new WOW().init();

  4. </script>

可選擇參數:

  1. wow = new WOW({

  2. boxClass:     'wow',      // default

  3. animateClass: 'animated', // default

  4. offset:       0,          // default

  5. mobile:       true,       // default

  6. live:         true        // default

  7. })

  8. wow.init();

配置

屬性/方法類型默認值說明
boxClass字符串‘wow’需要執行動畫的元素的 class
animateClass字符串‘animated’animation.css 動畫的 class
offset整數0距離可視區域多少開始執行動畫
mobile布爾值true是否在移動設備上執行動畫
live布爾值true異步加載的內容是否有效

3、為HTML添加專有class

  1. <div class="wow slideInLeft"></div>

  2. <div class="wow slideInRight"></div>

其中:

slideInLeftslideInRight分別代表方式,可以改為fadeInUp和fadeInDown等實現不同的動畫效果。

還可以這樣寫:

  1. <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>

  2. <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

通過添加參數調整動畫效果。

data-wow-duration 改變動畫時間

data-wow-delay 延遲在動畫開始之前

data-wow-offset 距離開始動畫(有關瀏覽器底部)

data-wow-iteration 動畫重復的次數

Animate.css+WOW.JS 點擊下載




相關文章
相關推薦
?
性欧美长视频免费