結論から
下記をコピペして、簡単にアニメーションを実装することができます。
WordPressを使用する場合はカスタム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 には、100近くのアニメーションが用意されています。
CDN（Content Delivery Network）を利用することで、ファイルをダウンロードせずにネット経由で使うことができます。HTMLのヘッダーに以下のコードを書きましょう。（バージョンはこちらからチェック：https://cdnjs.com/libraries/animate.css）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
wow.jsをCDNから参照
wow.js を使う理由は、cssだけではスクロール判定ができないからです。
HTMLのヘッダーに以下のコードを書きましょう。（バージョンはこちらからチェック：https://cdnjs.com/libraries/wow）
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
インスタンス生成も忘れずに書きます。
<script>new WOW().init();</script>
animate.cssの色々なアニメーションの使い方
animate.css からアニメーション名をクリックするすることで、アニメーションを確認することができます。また、横のコピーマークからそのアニメーションのクラス名をコピーすることができます。
コピーしたアニメーションを使うには要素のクラスにanimatedと使いたいアニメーションのクラス名の2つを記述します。
<!--テキストをfadeInで表示-->
<p class="animated fadeIn">このテキストがfadeInで表示されます</p>
animate.cssのバージョンについて
今回は、Ver.3の記述方法を紹介しましたが、animate.cssにはVer.3とVer.4があり、それぞれ使い方が少し異なります。下記の表のようにVer.4では全てのクラス名にanimate__がつきますので注意してください。
| Ver.3の場合 | Ver.4の場合 | |
|---|---|---|
| animate.cssの使用 | animated | animate__animated |
| フェードイン | fadeIn | animate__fadeIn |
| フェードアウト | fadeOut | animate__fadeOut |
また、バーションによって使えるアニメーション、使えないアニメーションがあるそうです。
（このバージョンだとこれが使えないなど、わかりましたらコメントで教えていただけると嬉しいです。）
wow.jsの使い方
animate.cssだけではページを表示した瞬間に全アニメーションが実行されてしまいますが、wow.js を使うことで、ページのスクロールに応じてアニメーションを実行することができるようになります。
スクロール判定を使用するには、要素のクラスにwowと記述します。
wow.jsではスクロール判定の他に、アニメーションの速度なども設定することができます。
| 指定項目 | オプション |
|---|---|
| アニメーションの持続時間 | data-wow-duration |
| アニメーションの開始時間 | data-wow-delay |
| アニメーションの開始距離 | data-wow-offset |
| アニメーションのループ数 | data-wow-iteration |
※ アニメーションを無限ループしたいときは、オプションではなく、クラスにinfiniteと記述すればOK
記述例
<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.
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();