wow.js+animate.css　で簡単アニメーション！

animate.cssってなに

要素に用意されたclassを指定するだけで、簡単にアニメーションを実装することができるスタイルシート。

公式サイト

wow.jsってなに

要素をスクロールに合わせて表示させたり、アニメーションの設定を簡単にできるJavaScriptのプラグイン。

公式サイト

説明だけ読むと初心者にはむずかしいけど、どっちも手順に従えばすごく簡単！なのでありがたい。

animate.cssだけでも動きの実装は可能なのですが、サイトでは、スクロールされた時、画面内に要素が見えた時に動かしたい！ということが多々あると思います。

その動きを簡単に実装できるのがwow.js。個人的には入れておかない手はないと思います。

読み込む

２通りの方法があります。

① CDNを使った読み込み
② ダウンロードしてローカルから読み込み

おすすめはCDNでの読み込みですが、インターネットに接続していないと動かないなどのデメリットも。
サイトを使用する目的などに合わせて使用するのがよさそう。

① CDNを使った読み込み

各CDNのリンクを読み込む
wow.jsは必ず、body閉じタグの直前、animate.cssはの中に記述。

wow.ja

<body>
    <!-- wow.min.jsの読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <!-- wow.min.jsの使用宣言 -->
    <script>
        new WOW().init();
    </script>
</body>

一緒に、を記載すると、動いてくれるみたい。
場所はCDNの下、もしくは別途jsのファイルがあるなら、その中でも大丈夫そう。animate.css

<!-- animate.cssの読み込み -->
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
</head>

※読み込むバージョンによっては、animationがうまく動かないブラウザがあったりするようです。
そのほか、windowsではanimationをOFFにする設定が本体側にあったりするみたい。

② ファイルをローカルに置く

公式サイトからダウンロード

animate.css
ダウンロード

wow.js
ダウンロード

それぞれ「Dwonload ZIP」をクリックして、インストールする。
ダウンロードの中から、distフォルダ > anime.css、wow.min.jsを自分の環境に置く。

<!-- animate.cssの読み込み -->
<head>
    <link rel="stylesheet" href="css/animate.css">
</head>

<!-- wow.min.jsの読み込み -->
<body>
    <script src="js/wow.min.js"></script>
    <!-- wow.min.jsの使用宣言 -->
    <script>
        new WOW().init();
    </script>
</body>

差し込みの位置は、CDNの時と同じ。

使い方

要素のclassに”wow アニメーション”を指定すると、スクロールが要素に達した時指定したアニメーションが実行されます。

<div class="wow animate__backInDown">
    <p>
        backInDownは、アニメーション名。
        animate__の部分は共通。絶対つきます。
        公式サイトからコピーもできます。
    </p>
</div>

アニメーション一覧