wow.jsを使ってアニメーションさせる方法

今回は、wow.jsを使ってアニメーションさせる方法について紹介します。

簡単にアニメーションを実装できるので、初心者にもおすすめです!

wow.jsとは?

Wow.jsはjQueryに依存しないJavaScriptライブラリです。

アニメーションを簡単に実装することができますよ。

wow.jsを使ってアニメーションさせる方法

デモサイトはこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

下にスクロールすると、画像にアニメーションがかかっていることが分かるでしょう。

Wow.jsを使えば、このように簡単にアニメーションが出来ますよ!

ファイルのダウンロード

まずはwow.jsを使うために必要なファイルをダウンロードしていきましょう。

GitHubにアクセスして、「Code」をクリックします。

そして「Download ZIP」をクリックしてファイルをダウンロードします。

すると、「WOW-master」のファイルがローカルに保存されているでしょう。

「WOW-master」のファイルの中から、「animate.css」「wow.js」のファイルを見つけましょう。

「wow.js」でも、「wow.min.js」でもOK!

そして2つのファイルを、HTMLと同じ階層に格納します。

これでファイルのダウンロードは完了です。

ファイルの読み込み

次にファイルの読み込みをしていきましょう。

◎headタグの中で読み込みます

◎bodyの閉じタグ直前で読み込みます

以上で、wow.jsを使う準備が完了しました。

HTML

アニメーションさせたい要素に対して、「wow」クラスをつけます。

そしてwowクラスの後ろに、アニメーションを表すクラスをつけます。

アニメーションの名前は、「animate.css」の公式サイトから選ぶことが出来ます。

右側にアニメーションの名前がずらりと並んでいることが分かるでしょう。

クリックすると、アニメーションの動作を確認することが出来ます。

ここからお好きなアニメーションの名前をコピペしてクラスをつけましょう。

 

そして他にもオプションを指定することが出来ます。

data-wow-duration→アニメーションの時間

data-wow-delay→アニメーションがスタートするまでの時間

data-wow-offset→アニメーションがスタートする距離

data-wow-iteration→アニメーションの繰り返し回数

◎使用例

JavaScript

wow.jsを使うための宣言コードをJavaScriptに書きます。

これがないと動かないので、注意してください。

まとめ

以上が、wow.jsを使ってアニメーションさせる方法でした。

是非真似してコーディングしてみてください!

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事