webpack中使用wowjs和animate.css
阿新 • • 發佈:2018-12-06
animate.css 是一個來自國外的 CSS3 動畫庫,它預設了抖動(shake)、閃爍(flash)、彈跳(bounce)、翻轉(flip)、旋轉(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多達 60 多種動畫效果,幾乎包含了所有常見的動畫效果。
官網:https://daneden.github.io/animate.css
github:https://github.com/daneden/animate.css
WOW.js可以在頁面向下滾動的過程中播放這些動畫效果,還可以為動畫設定喜歡的風格、延遲、長度、偏移和迭代等。
官網:http://mynameismatthieu.com/WOW
github:https://github.com/matthieua/WOW
在webpack中使用也很簡單,按如下步驟操作即可:
1.首先使用npm安裝wowjs
npm install wowjs --save-dev
animate.css會自動安裝。
2.在js檔案中新增如下程式碼
import 'animate.css' import {WOW} from 'wowjs'; new WOW({live: false}).init();
簡書安裝連結 https://www.jianshu.com/p/d715831505ce