• WOW.js 特效教學
  • 推文至Facebook  
  • 展示網址:點我觀看


     



    《安裝方法》

    step1載入animate.css動畫庫方法1:下載及安裝

    下載animate.css,在<head>區

     

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

     

     



    step2載入wow.js程式庫方法

     

    1:下載及安裝

    下載wow.js,在<head>區

     

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

     



    step3建立wow.js新物件

    <script>

      new WOW().init();

    </script>

    《基本用法》

    step1針對動畫元素,增加【.wow】class名稱即可引入wow.js使用。
    step2參考animate.css選擇設定動畫類型,其動畫對照表一覽表,連結位置
    註:animate.css使用說明,參考連結



     

     

    範例

    <div class="wow bounce">Example</div>



    《進階選項》


    wow.js 利用 【 data-*】加入變數值

    • data-wow-duration:更改動畫持續時間
    • data-wow-delay:動畫開始之前的延遲
    • data-wow-offset:開始動畫的距離(與瀏覽器底部相關)
    • data-wow-iteration:動畫的次數重複

     

    <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>

    <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>

     



    《自定義Script參數》

     

    <script>

    var wow = new WOW({

      boxClass: 'wow',            // 欲套用wow.js的class                      (預設wow)

      animateClass: 'animated',   // 欲修改設定animat.css 的類別名稱            (預設animated)

      offset: 0,                  // 當用戶滾動並到達這個距離時才開始執行動畫      (預設是0)

      mobile: true,               // 是否在行動裝置上執行動畫                   (預設是true)

      live: true                  // 非同步產生的內容是否要套用                 (預設是true)

      });

      wow.init();

    </script>



    如需要自行定義配置,可藉由wow.js新物件建立時自訂參數


    配置值說明

    屬性/方法
    類型
    默認值
    說明
    boxClass 字符串 'wow' 需要執行動畫的元素的class
    animateClass 字符串 'animated' animation.css 動畫的class
    offset 整數 0 當用戶滾動並到達這個距離時才開始執行動畫
    mobile 布爾值 true 是否在行動裝置上執行動畫
    live 布爾值 true 非同步產生的內容是否要套用

     

    新竹網頁設計,竹北網頁設計,竹南網頁設計,中壢網頁設計,網頁設計,免費模板,免費網頁套件,架設網站,網站架設 ,修改模板,主機代管,Android App

WOW.js 特效教學 -