vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

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

      2017/01/31

LINEで送る
Pocket

animate-wow
こんにちは、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の導入方法&使い方を見ていきましょう。

スポンサーリンク

Animate.cssの導入方法

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

LINKAnimate.css

animate-wow1

ダウンロードした「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付きの圧縮版を使うことをおすすめします。

animate-wow2

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

<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

animate-wow3

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

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

animate-wow4

解凍後、『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!

animate-wow5

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - CSS, JavaScript

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

グラフ作成にオススメ!「Chart.js」がかんたんに使えてイイ感じ

こんにちは、okutani(@okutani_t)です。先日、Google An …

【Win・Mac】Sassを導入&初めてScssを使ってみる

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

CSSでリンク横に「参考・LINK」バッジをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSS …

[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。