【JS】wow.jsとanimate.cssを使ってサイトにアニメーションを付ける方法！

どうも。みずかず(@mizukazu_1)です。

今回はwow.jsとanimate.cssを使ってWebサイトにアニメーションを付ける方法を紹介します。

このwow.jsを使うとスクロールしたタイミングで下からふわっとフェードインさせるといったアニメーションを容易に実装することが出来ます。

スクロールの位置やらなんやらを自分で実装するとなると少し手間なのですがその辺を楽に出来るので大変便利なライブラリです。

wow.jsの使い方

まずはライブラリ本体をダウンロードしてくる必要があります。

アニメーションのCSSライブラリであるanimate.cssも同時にダウンロードできます。

リンク先のGithubからダウンロードします。

ダウンロードが出来たらフォルダの中のcss/libs/animete.cssとdist/wow.min.jsを自分のプロジェクトに配置します。

headタグの中にanimate.cssのリンクを貼ります。

<link rel="stylesheet" href="css/animate.css">

bodyの閉じタグの直前にwow.jsのリンクを貼ります。

<script src="js/wow.min.js"></script>

これで読み込みは完了です。

bodyの閉じタグ直前に以下のコードを貼ります。

  <script>
    new WOW().init();
  </script>

この初期化宣言をしないと上手く動きませんので注意してください。

アニメーションさせる要素に対してwowというclassを付けるだけでwow.jsが使用できます。

<div class="wow animated fadeInUp">test</div>

こんな感じです。

ちなみに上記のコードだとスクロールしたタイミングで要素が下からフェードインしてきます。

wow.jsを使うにあたって注意点があります。

それはあくまでもwow.jsが担うのはアニメーションのトリガーの部分だということです。

今回の例だとアニメーション自体はanimate.cssの役目です。

なので、wow.js単体で使用してもアニメーションが出来ません。

必ずanimate.cssもしくは自分で作成したcssと一緒に使用していください。

今回はwow.jsというアニメーションのトリガーをいい感じに設定出来るライブラリを紹介しました。

実務でも使用していて結構お世話になっているライブラリです。

もっと色々細かい設定があるので引き続きこちらの記事で紹介しようと思います！