BLOG

Animate.cssとwow.jsを使って簡単アニメーション

| HTML/CSS/PHP、JavaScript

フリーランスになって３ヶ月を過ぎ生活リズムも安定してきたmasa44です。
フリーランスになってすぐは、バタバタしてたのと、規則正しい生活を心がけていたので体重が落ちてたんですが、ちょっとグータラ生活になってしまい、みるみる危険区域に突入してしまい、すごく焦ってダイエットを始めました。とりあえず、走ります。走れないけど走ります。

さて、サイトに動きをつけることが当たり前になってきている昨今、簡単にできないかなぁってお悩みのあなた！
JavaScript初心者でも簡単にサイトにアニメーションを使うことが出来る「Animate.css」「wow.js」をご紹介！

出来ること

簡単に言うと「Animate.css」で使える動きを、「wow.js」を使って制御するということです。

Animate.css

Animate.cssで出来る動きは結構たくさんあります。複雑な動きではなく、簡単な動きですがよく使うであろう動きとなっています。

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

こんなにたくさんの種類の動きができます。
動きを確認サれたい方は、Animate.cssで[Animate it]ボタンの横のプルダウンでみたい動きを選択して[Animate it]ボタンを押せば確認できます。

準備

animate.cssの読み込み

公式サイトもしくは、gitHubからデータをダウンロードし、読み込みます。

公式サイト
gitHub

<head>
// 〜　略　〜
<link rel="stylesheet" href="Path/to/animate.min.css">
// 〜　略　〜
</head>

wow.jsの読み込み

公式サイトもしくは、gitHubからデータをダウンロードし、読み込みます。

公式サイト
gitHub

<body>
// 〜　略　〜
<link rel="stylesheet" href="Path/to/wow.min.js">
</body>

wow.jsを読み込んだ後に、下記を記載する。

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

これで、準備をOKEYとなります。

使い方

アニメーションさせたい要素にclass="wow"を設定 ＋ させたいアニメーションの名前をクラスとして登録します。

// 左からスライドイン
<section class="wow slideInLeft"></section>
// 右からスライドイン
<section class="wow slideInRight"></section>

これだけで左右からスライドインするアニメーションが設定されます。
このままだと、表示してすぐにアニメーションが開始しする設定ですね。でも、これだと無機質な感じのアニメーションとなりますね。単純なアニメーションです。
単純なアニメーションをオプション設定により「アニメーションする時間」「表示してから動き出すまでの時間/距離」「繰り返す回数」が設定でき複雑なアニメーションができます。

オプション 用途
data-wow-duration アニメーションをしている時間
data-wow-delay 要素が表示してからアニメーションが開始するまでの時間
data-wow-offset 要素が表示してからアニメーションが開始するまでの距離
data-wow-iteration アニメーションを繰り返す回数 
// 要素が表示してから2s後に、1.5s間アニメーションをする
<section class="wow slideInLeft" data-wow-duration="1.5s" data-wow-delay="2s"></section>
// 要素が表示してから100px通過後に、1.5s間アニメーションをする
<section class="wow slideInLeft" data-wow-duration="1.5s" data-wow-offset="100"></section>

オプションの設定は要素にそのまま書くだけですね。直接書くことができて直感でわかりやすいですね。

デモ

簡単なデモ作ってみました。infiniteのクラスを付けているので永久ループです。

See the Pen wow.js & animate.css by msys (@msys) on CodePen.

まとめ

設置さえしてしまえば、classとオプションをつけるだけでアニメーションが簡単に付けれるなんてすごいですよね。
軽いので、簡単なアニメーションだったら、スマホでも十分対応できます。
動画や、アニメーションが当たり前になってきたサイト事情ですが、これらを使えばどなたでも、簡単にアニメーションが設定できますね。

ブログ一覧へ
CONTACT
PAGE TOP