「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

2015/11/26 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに動きをつけるとき、どうしていますか？

『Animate.css』と『wow.js』を組み合わせて使うことでお手軽かつシンプルにWebサイトに動きをビュンビュンつけることができます。ええ、そりゃあもうビュンビュンに。

このふたつを使うことで、ほとんどプログラミングせずに動きのあるサイトが作れます。

なぜ、このふたつを使うのか、それぞれの役割をかんたんに説明します。

Animate.css

文字通りWebサイトにアニメーションをつけることができるcssファイル。Animate.cssはWebサイトが読み込まれた瞬間に発動してしまうので、一般的にwow.jsと組み合わせて使う。

wow.js

Webサイトのスクロール位置を知ることができる。wow.jsを使うことで、好きなタイミングでAnimate.cssを呼ぶことができる。スクロールが行われてからアニメーションさせるため必要。

という感じです。

では、さっそくAnimate.cssとwow.jsの導入方法＆使い方を見ていきましょう。

1 Animate.cssの導入方法
2 wow.jsの導入方法
3 実際にアニメーションをつけてみよう
4 まとめ

Animate.cssの導入方法

Animate.cssは下記からダウンロードできます。TOPページの「Download Animate.css」をクリックしましょう。

LINKAnimate.css

ダウンロードした「animate.css」を、利用したいプロジェクトに配置して次のように呼び出せばOKです。

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

また、TOPページから動かしたいアニメーションを選択して『Animate it』を押せば、その場で動きを確認することができます。

Animate.cssは下記サイトからCDNを使って設置することもできるので、ソースコードにコピペだけで手軽に利用することもできますね。

LINKanimatecss – cdnjs.com – The free and open source CDN for web related libraries to speed up your website!

ソースコードの中身を見ることはないかと思うので、min付きの圧縮版を使うことをおすすめします。

次のように記述して使います。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

wow.jsの導入方法

次はwow.jsの導入手順を見ていきましょう。wow.jsの公式サイトにアクセスします。

LINKReveal Animations When Scrolling — WOW.js

公式サイト自体がDEMOになっているので、アクセスした瞬間にアニメーションが動いてびっくりします……笑

ダウンロードは上部メニューから、『GITHUB』を選択。GitHubのサイトへ移動した後『Download ZIP』をクリックします。

解凍後、『dist』内にある『wow.js』もしくは『wow.min.js』を、次のようにプロジェクトに設置します。

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

中のソースコードを見ることはないかと思うので、圧縮されたwow.min.jsを使うことにします。

Animate.cssと同じく、次のサイトからCDNでも提供されています。

LINKwow – cdnjs.com – The free and open source CDN for web related libraries to speed up your website!

CDNで使う場合は、次のように記述すればOKですね。

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

実際にアニメーションをつけてみよう

animate.cssとwow.jsの準備が整ったので、実際にHTMLファイルを用意してサンプルを動かしてみましょう。

index.htmlを用意し、次のサンプルコードを記述しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>wow.js+animate.css</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
  <!-- もしくは <link rel="stylesheet" href="animate.css"> -->
</head>
<body>
  <h1 class="text-center">wow.jsとanimate.cssを使ったテスト</h1>

  <h2 class="wow bounceInUp" data-wow-duration="3.0s">bounceInUp!</h2>
  <h2 class="wow fadeInLeftBig" data-wow-duration="2.0s" data-wow-delay="1s">fadeInLeftBig!</h2>
  <h2 class="wow rollIn" data-wow-offset="10" data-wow-iteration="10">rollIn!</h2>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <!-- もしくは <script src="wow.min.js"></script> -->
  <script>
    new WOW().init();
  </script>
</body>
</html>

かんたんに解説します。

headタグの中にanimate.cssを、bodyタグ下部にwow.jsを配置しています。

</body>のすぐ上に

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

と記述することで、wow.jsを使えるように呼び出しています。

ちなみに、WOW()の中に次のオプションを設定すると、スマートフォンではアニメーションさせないように設定することができます。

<script>
  new WOW({
    mobile: false
  }).init();
</script>

スマートフォンだと、スペック的にどうしても動作が遅くなってしまうため、極力、『mobile: false』オプションは設定しておきたいですね。

アニメーションをつけたい要素に『wow + Animate.cssで利用できるアニメーション』をclassに記述してあげることで、スクロールされたときに設定したアニメーションが動くようになります。かなりシンプルですね。

次のように使ってあげればOKです。

<h2 class="wow bounceInUp">bounceInUp!</h2>

Animate.cssで使えるアニメーション一覧は以下のとおりです。

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

また、下記のwow.jsのオプションを使いたい要素のHTMLタグに埋め込むことで、読み込むタイミングやアニメーションの回数などを細かく指定することができます。

data-wow-duration="1.0s"

指定した秒数かけて要素を表示させることができる。

data-wow-delay="1.0s"

スクロールで要素まで達したとき、指定した秒数、遅らせて表示させる。

data-wow-offset="10"

画面に表示されてから、アニメーションを開始する距離を指定。基準位置は画面下になる。

data-wow-iteration="10"

指定した回数分、アニメーションを繰り返し動作させる。

このオプションを使えば、同じ型のアニメーションでも違った動き方にすることができますね。

さらに、アニメーションさせたい要素のclassに『infinite』を追加してあげると、無限にアニメーションを繰り返すことができます。

以下が今回作成したデモです。動きを確認してみてください（別途、余白等つけています）。

DEMOwow.js+animate.css

Animate.cssとwow.jsの導入と使い方は以上です。これでアニメーション付きのオシャレなサイトを作ってみてください！( ´ ▽ ` )ﾉ

まとめ

Animate.cssとwow.jsを組み合わせることで、お手軽にアニメーション付きのサイトを実装することができました。

あまりサイトに動きを付け過ぎると、ユーザビリティの低下に繋がるので注意しましょう。ちょっと動かす、ぐらいが見やすくて良いかもしれませんね。

Animate.cssで付けられるアニメーションの数はまあまあ豊富なので、ぜひ公式サイトのデモを見て気に入ったものを選んでみてください。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

Webサイトにアニメーションをつけるとワクワクしますね。ランディングページの作成のときなんか目立っていいんじゃないでしょうか。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- CSS, JavaScript