【CSS】wow.js、animation.css觸發事件_區塊突現

*wow.js、animation.css觸發事件_區塊突現
➤wow.js觸發事件達到區塊突現

使用全頁式fullpage的網頁，wow.js肯定能讓棧友的網頁更加有視覺感，這個網站有提供讓您滾動卷軸時，能觸發區塊的動畫完成淡入進場的效果(抖動、滾進、上下左右進場、變大變小等)。
傳送門 > https://www.delac.io/wow/index.html


➤如何加入自己的網頁上
1.裝好wow.js和animation.css 
(1)下載animation.css
進到上方傳送門網站後，點擊How to use
下載animation.css並放入css資料夾，再插入網頁。

<link rel="stylesheet" href="css/animate.css">

(2)下載wow.min.js
到https://github.com/matthieua/WOW/tree/master/dist 下載wow.min.js
下載後放入js資料夾，再插入網頁
建議放在</body>前面，避免client端瀏覽載入頁面時造成遲延

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

2.觸發css animations 

<div class="wow bounceInUp">我跳出來啦~~</div>

class內的"wow"可以隱藏該區塊，直到下拉捲軸滾到該區塊時就會觸發突現。
class內的"bounceInUp"是指動畫突現的方式。


3.動畫突現的方式:
shake = 迅速左右抖動
bounce = 迅速上下抖動
bounceInUp = 迅速由下往上抖動進入
bounceInDown= 迅速由上往下抖動進入
bounceInRight = 由右往左進入

lightSpeedIn= 由右到左快速以斜角進入
rollIn = 由左往右滾動淡入
fadeInDown = 由上往下淡入(多數人常用)
pulse = 變大變小


4.進階選項
可以在您的div裡面設定 

<div class="container wow fadeInDown" data-wow-delay="0.5s" data-wow-offset:"10">

data-wow-duration: 突現秒數
data-wow-delay: 遲延秒數
data-wow-offset: 位移
data-wow-iteration: 重複次數(要一直重複的話可以用"infinite")