超簡単！wow.jsを使って要素にアニメーションを付け加える。

こんにちは！銀太です！

今回はWebサイトでページスクロールしたタイミングで動くアニメーションを簡単に実装できるwowjsをご紹介します！

すごく簡単です！

wow.jsとは？

「WEBサイトに動きをつけるための様々なアニメーションが入ったJavascriptライブラリ」です。

wow.jsはアニメーションのトリガー、アニメーションの詳細な動きを設定できます。

サンプルの動きはこちらから確認して下さい！- デモページ

ファイルダウンロード

それではwow.jsを使用する為の準備を初めていきましょう！

wow.jsを使用する為に必要なファイルは２つになります！

上記２つをサイト内に導入するだけで簡単にwow.jsが使用できます。

ダウンロード方法

・anime.css – URL

・wow.min.js – URL

上記URLからそれぞれ「Dwonload ZIP」を押して、ZIPファイルをダウンロードします。 ダウンロードしたZipファイルを展開し、distフォルダの中にある、anime.css、wow.min.jsを自身のプロジェクト内に格納し、指定して下さい。

<!-- animate.cssの読み込み --> 
<link rel="stylesheet" href="css/animate.css"> 
<!-- wow.min.jsの読み込み --> 
<script src="js/wow.min.js"></script>

ファイルパスはご自身の環境に合わせて変えて下さい！

wowの使用宣言

これを書かないとwow.jsが、動かないので忘れずにbody閉じタグの直前にscriptタグで記入して下さい。

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

なんとこれだけでwow.jsを使えちゃうんですよね。

とっても楽ちんです。

アイテムにclass指定

後はアニメーションを付けたい要素に特定のclassを付与してあげればOKです！

アニメーションさせる要素に「wow」というクラスを付ければ動いちゃいます。

<div class="wow fadeInUp">アニメーションさせたい要素</div>

もうなんとこれだけで要素にアニメーションを付け加えられます。最高です。

他にも「fadeInRight」「fadeInUpBig」「flipOutX」「rotateInUpLeft」などなど、様々な動きの中から好きなものを指定して使うことができます。

オプション設定

wow.jsはオプションの設定が出来ます。

オプションを使って自分好みにカスタムしちゃいましょう！

実際に書いてみるとこんな感じになります↓

<div class="wow fadeInUp" data-wow-duration="3s">ゆっくり３秒かけてアニメーション</div>
<div class="wow fadeInUp" data-wow-delay=".5s">可視範囲に入って0.5秒後にアニメーション開始</div>
<div class="wow fadeInUp" data-wow-offset="100">可視範囲からさらに100pxスクロールされたらアニメーション</div>
<div class="wow fadeInUp" data-wow-iteration="2">アニメーションを２回繰り返す</div>

これで細かい設定も出来ますね！

終わりに

これで作成してるwebサイトに簡単にアニメーションを付け加えれますね！

少しアニメーションがあるだけでも結構見栄えは変わるんじゃないかなって思います！（個人の感想）

今回の記事で『上手く実装出来た〜！』『満足いくアニメーションを付け加えられた〜！』って人が居たらとっても嬉しいです。

それでは皆さんの人生に幸あれ。