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


     



    《安裝方法》

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

    下載animate.css,在

     

     

     

     



    step2載入wow.js程式庫方法

     

    1:下載及安裝

    下載wow.js,在

     

     

     



    step3建立wow.js新物件

     

    《基本用法》

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



     

     

    範例

     

    Example

     



    《進階選項》


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

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

     

     

     

     

     

     

     

     



    《自定義Script參數》

     

     



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


    配置值說明

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

     

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

  • WOW, 特效教學, jQuery
NetYea 客服 NetYea 客服
NetYea 客服

WOW.js 特效教學 -