5、animate.css + wow.js 網頁動畫就是這麼簡單_Boostrap4響應式模板DIy_Ecshop For PHP7.3::繁體中文全支援-原來如此 By we-shop.net

COVID-19【新冠病毒】即時資訊：全球疫情台灣疫情

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

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

發表於： 2020-09-27 最後更新：現在時間：2021-11-28 23:40:15

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 class="new_articles">
			<a href="article-387-1%E3%80%81ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BFDIY%E6%87%B6%E4%BA%BA%E5%8C%85%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89.html" title="1、ECSHOP響應式模板DIY懶人包免費下載 2020-09-23" class="d-block">
				<div class="img_box fl" style="width:160px;height:100px;background-image: url(/images/upload/image/202009/20200923172515_69334.jpg);background-size: contain;"></div>
			</a>
			<div class="info">
				<div class="title text-truncate">
					<a href="article-387-1%E3%80%81ECSHOP%E9%9F%BF%E6%87%89%E5%BC%8F%E6%A8%A1%E6%9D%BFDIY%E6%87%B6%E4%BA%BA%E5%8C%85%E5%85%8D%E8%B2%BB%E4%B8%8B%E8%BC%89.html" title="1、ECSHOP響應式模板DIY懶人包免費下載 2020-09-23" class="d-block">
						<i class="fas fa-pencil-ruler"></i> <span class="is_new"><em>NEW</em></span> 1、ECSHOP響應式模板DIY懶人包免費下載					</a>
				</div>
				<div class="text-truncate3">
					Bootstrap是一個不錯用的響應式前台CSS框架，加上他的JS可以執行許多Jquery的效果，Bootstrap也已經對不同平台設備做了相容性的處理，因此就算再有此類問題也只是少數了...
說是ECSHOP模板，其實套用到任何網站模板都一樣，只是布局排版因人而異，但基本上沒多大的難度可言，因為ECSHOP的版型檔案比較多，建議只針對需要的檔案做修改，沒用到的檔案先略過，這樣可以節省不少時間。...				</div>
			</div>
		</div>
	</div>

6、用fontawesome icon取代網頁小圖示，縮放不失真

7、用 sweetalert2 取代 alert 的彈出視窗

8、用CSS處理(截斷)過長的文字

4、只有超出導航的連結才折疊的響應式導航

3、不依賴Jquery的響應式多階層導航

2、響應式模板DIY懶人包--載入CSS和JS

1、ECSHOP響應式模板DIY懶人包免費下載

Ecshop 好站連結