Last-Modified: 2020/09/22

【wow.jsの使い方】JavaScriptでアニメーションをつけよう【jQueryプラグイン】

wow.jsの使い方

Webサイト制作において全く動きのないサイトはUX的に良くありませんよね。
しかし、凝った動きを実装しようと思っても初心者には難しかったりします。
そこでjQueryのプラグインであるWOWを使って簡単に動きをつけることができるので、この記事で紹介しておきます。

WOWとはjQueryのプラグインでWebサイトに動きをつけることができます。
ひとまず初心者はこのプラグインを使用しておけば問題ないと思います。

実装方法は下記の通り。

GitHubで管理されているので下記よりダウンロードしてください。
ダウンロードしたZipファイルを解凍するといくつかファイルが入っているので、animate.cssとwow.min.jsというファイルを探してご自身の環境に合わせて格納してください。
→WOWのダウンロードはコチラ

ダウンロードしたファイルを読み込みましょう。

ファイルパスはご自身の環境に合わせて変えてくださいね。

動きをつけたいアイテムに特定のclassを付与してあげればOKです。

classの付け方はこんな感じですね。
4つ目のdivには色々オプションが付いていますが、これも少し解説しておきましょう。

data-wow-duration：アニメーションの継続時間
data-wow-delay：：スタートまでの時間
data-wow-offset：スタートする距離
data-wow-iteration：繰り返し回数

自分好みに設定したい場合はオプションもつけてみると良いでしょう。
用意されたアニメーションはコチラから確認できますので、参照してみてください。

忘れがちですが、これを書かないと動かないので忘れず書いておきましょう。

scriptに上記の通り記載でOKです。
これでWOWの実装完了です。簡単ですね。