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

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

發表於: 2020-09-27 最後更新: 現在時間:2020-10-23 07:03:56

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>
您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2020-10-23 07:03:56