1. 程式人生 > >wow.js 舞動的青春 調皮的元素

wow.js 舞動的青春 調皮的元素

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、不喜歡搖擺?那改個名字,換個新的姿勢 

animate.css
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 動畫重複的次數