wow.js 舞動的青春 調皮的元素
阿新 • • 發佈:2018-12-17
1、頭部引入animate.css
<link rel="stylesheet" href="css/animate.min.css">
2、尾部引入
<script src="js/wow.min.js"></script>
3、緊接著開啟神奇的開關
<script>
new WOW().init();
</script>
4、加上class名一起搖擺
<h2 class="wow shake">最新訊息</h2>
5、不喜歡搖擺?那改個名字,換個新的姿勢
bounce | pulse | rubberBand |
swing | tada | bounceIn |
bounceInUp | lightSpeedIn | fadeIn |
rotateIn | rollIn | hinge |
flip | flipInX |
slideInLeft |
6、來自天蠍座的控制慾,控制元素的動畫時間和延遲等
<h2 class="wow tada" data-wow-offset="20 data-wow-delay="1s">最新訊息</h2>
data-wow-duration
改變動畫時間
data-wow-delay
拖延症,能拖幾秒是幾秒
data-wow-offset
距離瀏覽器底部多遠時開始搞事情
data-wow-iteration
動畫重複的次數