wow!!頁面捲動讓動畫變得輕鬆

Animate.css與Wow.js外掛結合

(1)Animate.css

懶得寫animation CSS動畫嗎?Animate.css幫忙寫了很多不錯的動畫喔!!


利用tada動畫,學習如何修改

.gotop { animation: tada 1s infinite;}
@keyframes tada {
  from {
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 45deg); }
      10%, 20% {   transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, 47deg);  }
      30%, 50%, 70%, 90% {  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 47deg); }
      40%, 60%, 80% {  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 43deg);  }

  to {
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 45deg);
  }
}

.tada {
  animation-name: tada;
}

(2) wow.js與animate.css結合

wow.js利用捲動觸發事件,與animate.css有趣的動畫結合,讓不會寫程式也會完成捲動動畫效果。

相關連結:wow.js CDNwow.js 官網

S1:加入相關連結

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

S2:為元素加入捲動動畫方式

(1) 利用 元素【class=”wow animate.css動畫名稱”】

(2) wow.js 利用 【 data-*】加入變數值

data-wow-duration:更改動畫持續時間
data-wow-delay:動畫開始之前的延遲
data-wow-offset:開始動畫的距離(與瀏覽器底部相關)
data-wow-iteration:動畫的次數重複

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

S3加入javascript 程式

new WOW().init();

自定義配置javascript

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置值說明

屬性/方法 類型 默認值 說明
boxClass 字符串 ‘wow’ 需要執行動畫的元素的class
animateClass 字符串 ‘animated’ animation.css 動畫的class
offset 整數 0 距離可視區域多少開始執行動畫
mobile 布爾值 true 是否在移動設備上執行動畫
live 布爾值 true 異步加載的內容是否有效

其他連結:(1)連結(2)連結