head
內引入animate.css或者animate.min.css。<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
wow
是必需要添加的
slideInLeft
說明了動畫的樣式,是從左邊滑動出來的
後面的data-wow-duration
(動畫持續時間)、data-wow-delay
(動畫延遲時間)、data-wow-offset
(元素的位置露出後距離底部多少像素執行)和data-wow-iteration
(動畫執行次數)這四個屬性可選可不選。css
這樣就完成啦,是否是很簡單呢。git