目前位置: 首頁 > Boostrap4響應式模板 > 5、animate.css + wow.js 網頁動畫就是這麼簡單

5、animate.css + wow.js 網頁動畫就是這麼簡單 超大 稍大 正常

發表於: 2020-09-27 最後更新: 最後更新時間:2022-10-04

animate.css是一個純CSS的動畫庫,目前有近百種的動畫樣式,使用了animate.css之後,你只需指定想要的動畫效果animate.css就會幫你完成,但是animate.css是在頁面載入時就執行,訪客還沒看到動畫就已經執行完畢,所以要搭配wow.js,便可等到頁面捲動到元素出現在可視區域時才執行動畫,就像本站的首頁一樣...

以下是animate.css的動畫效果清單,animate官網也提供了所有可用的動畫演示

bounce、flash、pulse、rubberBand、shakeX、shakeY、headShake、swing、tada、wobble、jello、heartBeat、backInDown、backInLeft、backInRight、backInUp、backOutDown、backOutLeft、backOutRight、backOutUp、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown、fadeInDownBig、fadeInLeft、fadeInLeftBig、fadeInRight、fadeInRightBig、fadeInUp、fadeInUpBig、fadeInTopLeft、fadeInTopRight、fadeInBottomLeft、fadeInBottomRight、fadeOut、fadeOutDown、fadeOutDownBig、fadeOutLeft、fadeOutLeftBig、fadeOutRight、fadeOutRightBig、fadeOutUp、fadeOutUpBig、fadeOutTopLeft、fadeOutTopRight、fadeOutBottomRight、fadeOutBottomLeft、flip、flipInX、flipInY、flipOutX、flipOutY、lightSpeedInRight、lightSpeedInLeft、lightSpeedOutRight、lightSpeedOutLeft、rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight、rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight、hinge、jackInTheBox、rollIn、rollOut、zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp、zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp、slideInDown、slideInLeft、slideInRight、slideInUp、slideOutDown、slideOutLeft、slideOutRight、slideOutUp
至於使用方法極為簡單,:
<!-- 首先載入必要檔案、並初始化 -->
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
	new WOW().init();
</script>
<!-- 在要執行動畫的元素上指定動畫方式,如果要HTML元素出現可是範圍才執行動畫,請務必加上wow類 -->
<div class="col-md-6 wow fadeInRight">
	<!-- 動畫內容(文字或圖片、影音)-->
</div>
對於本站文章有任何問題或建議歡迎寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2022-10-04