【WordPress対応】animate.cssとwow.jsで簡単にスクロール連動のアニメーションを実装する方法

# 結論から
下記をコピペして、簡単にアニメーションを実装することができます。
WordPressを使用する場合はカスタムHTMLブロックをしようして記述することができます。

解説は次節から行っていきます。

```.html
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <script>new WOW().init();</script>
</head>

<!--テキストをfadeInで表示-->
<p class="wow animated fadeIn" data-wow-duration="2s">このテキストがfadeInで表示されます</p>

<!--リンクをflashで表示-->
<a href="#" class="wow animated flash">このリンクがflashで表示されます</a>
```

# animate.cssをCDNから参照
[animate.css](https://animate.style) には、100近くのアニメーションが用意されています。
CDN（Content Delivery Network）を利用することで、ファイルをダウンロードせずにネット経由で使うことができます。HTMLのヘッダーに以下のコードを書きましょう。（バージョンはこちらからチェック：https://cdnjs.com/libraries/animate.css）
```.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
```

# wow.jsをCDNから参照
[wow.js](https://wowjs.uk/) を使う理由は、cssだけではスクロール判定ができないからです。
HTMLのヘッダーに以下のコードを書きましょう。（バージョンはこちらからチェック：https://cdnjs.com/libraries/wow）
```.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
```
インスタンス生成も忘れずに書きます。
```.html
<script>new WOW().init();</script>
```

# animate.cssの色々なアニメーションの使い方
[animate.css](https://animate.style) からアニメーション名をクリックするすることで、アニメーションを確認することができます。また、横のコピーマークからそのアニメーションのクラス名をコピーすることができます。

[![animate](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781151/6234040b-eabc-807e-8af5-5eb377f1a299.png)](https://animate.style)

コピーしたアニメーションを使うには要素のクラスに`animated`と`使いたいアニメーションのクラス名`の2つを記述します。
```.html
<!--テキストをfadeInで表示-->
<p class="animated fadeIn">このテキストがfadeInで表示されます</p>
```

# animate.cssのバージョンについて
今回は、Ver.3の記述方法を紹介しましたが、animate.cssにはVer.3とVer.4があり、それぞれ使い方が少し異なります。下記の表のようにVer.4では全てのクラス名に`animate__`がつきますので注意してください。

<table>
  <caption>バージョンによる記述方法の違い</caption>
  <thead>
    <tr>
      <th></th> <th>Ver.3の場合</th> <th>Ver.4の場合</th>
    </tr>
  </thead>
  <tr>
    <td> animate.cssの使用 </td> <td>animated</td> <td>animate__animated</td>
  </tr>
  <tr>
    <td> フェードイン </td> <td>fadeIn</td> <td>animate__fadeIn</td>
  </tr>
  <tr>
    <td> フェードアウト </td> <td>fadeOut</td> <td>animate__fadeOut</td>
  </tr>
</table>

また、バーションによって使えるアニメーション、使えないアニメーションがあるそうです。
（このバージョンだとこれが使えないなど、わかりましたらコメントで教えていただけると嬉しいです。）

# wow.jsの使い方
animate.cssだけではページを表示した瞬間に全アニメーションが実行されてしまいますが、[wow.js](https://wowjs.uk/) を使うことで、ページのスクロールに応じてアニメーションを実行することができるようになります。
スクロール判定を使用するには、要素のクラスに`wow`と記述します。
wow.jsではスクロール判定の他に、アニメーションの速度なども設定することができます。

<table>
  <caption>wow.jsのオプション設定</caption>
  <thead>
    <tr>
      <th>指定項目</th> <th>オプション</th>
    </tr>
  </thead>
  <tr>
    <td> アニメーションの持続時間 </td> <td>data-wow-duration</td>
  </tr>
  <tr>
    <td> アニメーションの開始時間 </td> <td>data-wow-delay</td>
  </tr>
  <tr>
    <td> アニメーションの開始距離 </td> <td>data-wow-offset</td>
  </tr>
  <tr>
    <td> アニメーションのループ数 </td> <td>data-wow-iteration</td>
  </tr>
</table>

※ アニメーションを無限ループしたいときは、オプションではなく、クラスに`infinite`と記述すればOK

<br><br>
記述例

```.html
<div class="wow fadeInUp" data-wow-duration="2s">2秒かけてfadeInUp</div>
<div class="wow fadeInDown" data-wow-delay="1s">到達してから1秒後にfadeInDown</div>
<div class="wow fadeInRight" data-wow-offset="3">到達してから3スクロール後にfadeInRight</div>
<div class="wow fadeInLeft" data-wow-iteration="5">5回fadeInLeft</div>

<div class="wow fadeInUp" data-wow-delay="1s" data-wow-duration="2s">到達してから1秒後に2秒かけてfadeInUp</div>
```


# さいごに
CDNを使うことにはメリットもデメリットもあると思います。
ただ、wow.jsをCDNから参照する記事が少なかったので、とりあえずアニメーションをつけて見たいときに役立つと思いまとめてみましたので、誰かの参考になれば幸いです。
（animate.cssはCDNを使って、wow.jsはダウンロードして使ってることが多いみたいです。）

バージョンによってモバイルでは動かないアニメーションがあるとかないとか...
なので、そんな情報もお待ちしてます。


以下、力尽きたので公式ドキュメントをコピペしておきます。
ーー
Customize Settings
boxClass: Class name that reveals the hidden box when user scrolls.

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

offset: Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distance the hidden box is revealed.

mobile: Turn on/off wow.js on mobile devices.

live: consatantly check for new WOW elements on the page.

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