5分鐘學會WOW.js

發表於

5分鐘學會WOW.js

你不能說A是由B產生的，或反之亦然。「所有的事物都是相互作用的」 - 理察·費曼

WOW.js

使用WOW.js

  • 鏈接到CSS動畫庫和WOW.js
1
2
3
4
5
6
<link rel =“stylesheet”href =“css / animate.css”>

<script src="js/wow.min.js"></script>
            <script>
            new WOW().init();
            </script>
  • 在Animate.css中選擇一種動畫樣式，然後將CSS類添加到HTML元素中
1
<div class ="wow bounceInUp">  內容在這裡揭示  </div>

基本設定

  • data-wow-duration：更改動畫持續時間
  • data-wow-delay：動畫開始前的延遲
  • data-wow-offset：啟動動畫的距離（與瀏覽器底部相關）
  • data-wow-iteration：動畫的重複次數

相關設定

1
2
3
4
5
6
7
8
9
10
11
12
13
var wow = new WOW(
    {
        boxClass: 'wow', // 要套用WOW.js縮需要的動畫class(預設是wow) 
        animateClass: 'animated', // 要"動起來"的動畫(預設是animated, 因此如果你有其他動畫library要使用也可以在這裡調整) 
        offset: 0, // 距離顯示多遠開始顯示動畫 (預設是0, 因此捲動到顯示時才出現動畫)
        mobile: true, // 手機上是否要套用動畫 (預設是true) 
        live: true, // 非同步產生的內容是否也要套用 (預設是true, 非常適合搭配SPA)
        callback: function(box) { // 當每個要開始時, 呼叫這裡面的內容, 參數是要開始進行動畫特效的element DOM
        },
        scrollContainer: null   // 可以設定成只套用在某個container中捲動才呈現, 不設定就是整個視窗
    }
);
wow.init();