CSS3アニメーションが簡単に追加できる CSS3 Animate It 試してみた
classを指定するだけで簡単にCSS3のアニメーションが追加できるjQueryのプラグイン「CSS3 Animate It」を試してみました。
(2014年7月7日追記) 制作者さんのサイトがリニューアルされた様でURLが変更になっていたので一部リンク先を修整しました。
ダウンロード
ダウンロードは本サイトかGitHubから。本サイトの方でダウンロードのボタンをクリックすると「Please consider a donation :)」って言われますが、とりあえずお試しなので0£で…。ちなみに国内サイトではめったに使わないかもしれませんが、「£」の参照は「£」でした。(豆知識)
>>CSS3 Animate It
>>Jack-McCourt/css3-animate-it · GitHub
デモ見て感動。試してみよう。
使用できるアニメーションの一覧
使用できるアニメーションの一覧はこちらのでもページで確認できます。全部で29個もありました。
- bounceIn ・・・その場でバウンドぼわわーんと停止。
- bounceInDown ・・・ボールが地面についてバウンドして停止。
- bounceInRight ・・・右から出てきて左部でバウンドして停止。
- bounceInUp ・・・下から出てきて上部でバウンドして停止。
- bounceInLeft ・・・左から出てきて右部でバウンドして停止。
- fadeInDown ・・・上から下へフェードインしながら停止。
- fadeInUp ・・・下から上へフィードインしながら停止。
- fadeInLeft ・・・左から右へフィードインしながら停止。
- fadeInRight ・・・右から左へフェードインしながら停止。
- fadeIn ・・・その場でフィードインして停止。
- growIn ・・・だんだん大きくなりながら停止。
- shake ・・・左右にシェイクして停止。
- shakeUp ・・・上下にシェイクして停止。
- rotateIn ・・・右回りに1回転して停止。
- rotateInUpLeft ・・・下方向から右方向へ90度回転して停止。(↓→)
- rotateInDownLeft ・・・上方向から右方向へ90度回転して停止。(↑→)
- rotateInUpRight ・・・下方向から左方向へ90度回転して停止。(↓←)
- rotateInDownRight ・・・上方向から左方向へ90度回転して停止。(↑←)
- rollIn ・・・左からゴロリンと回ってきて停止。
- wiggle ・・・左右にウニウニとして停止。wiggle= (訳)身動き
- swing ・・・左右にスウィングして停止。
- tada ・・・キュッと締まってからバーンみたいな。tada= (訳)ジジャーンみたいな擬音語らしい。
- wobble ・・・左右にグラグラしてから停止。wobble= (訳)ぐらぐらする.
- pulse ・・・心臓が動いてるみたいな状態からの停止。所謂パルス。
- lightSpeedInRight ・・・右から勢いつけてやってきて右で急にストップ、みたいな感じ。
- lightSpeedInLeft ・・・左から勢いつけてやってきて左で急にストップ、みたいな感じ。
- flip ・・・パネルをはじいてクルクルクルみたいな感じ。
- flipInX ・・・フェードインしながら縦方向にクルっと。
- flipInY ・・・フェードインしながら横方向にクルっと。
途中から何を説明しているのかわからなくなり、お前は何を言っているんだ状態ですが、まぁ日本語で簡単に説明するとそんな感じの効果です。見た方が早いので是非見てください。
基本的な使い方
冒頭でもチラっと書きましたが、使い方は簡単で必要なファイルを読み込んでアニメーションをつけたい要素にclass属性を追加するだけです。
必要なファイルは下記3点です。
- animations.css (css3-animate-it-master/css内)
- jQuery本体ファイル（公式ではバージョン1.11.1を読み込んでいました）
- css3-animate-it.js (css3-animate-it-master/js内)
これらを使いたいページに読み込みます。
animations.cssはhead要素内で読み込んで、css3-animate-it.jsはファイルの最後で読み込む、とCSS3 Animate Itに書いてあったので言われた通りにします。
jQuery本体に関してはhead要素内で元々読み込んであるぜという場合はそれでOKです。jQuery使ってないのという場合はhead要素内でもファイルの最後でもどこでもいいので、とりあえずcss3-animate-it.jsより先に読み込みます。
//head要素内 <head> ・・・ <link rel="stylesheet" href="ファイルまでのパス/animations.css" type="text/css" /> </head> //ファイルの最後</body>直前とか ・・・ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="ファイルまでのパス/css3-animate-it.js"></script> </body>
とりあえずこの3つが読み込めれば準備OKです。
後はアニメーションを加えたい要素と親要素へclass属性を付与してやればアニメーションを実装できます。
例えばこちらのQuick Startにあるように
<div class='animatedParent'> //親要素に「.animatedParent」 <h2 class='animated bounceInDown'>It Works!</h2> //アニメーションさせたい要素に「.animated」と「.与えたいアニメーション効果のclass名」 </div>
こんな感じで指定すると、簡単に下記サンプルのようにアニメーション効果をつける事が出来ます。
手軽で簡単に追加できます。既存のものに加えるのも簡単な点は実用性高いですね。
基本的には親要素に「.animatedParent」、アニメーションさせたい要素に「.animated」と「.与えたいアニメーション効果のclass名」という形だけ覚えておけば良さそうです。
ビューポート内に要素が表示された時にアニメーションが始まる
このプラグインのアニメーションはその要素がビューポートに要素が表示された時、つまりブラウザ等の画面枠にその要素が表示された時にアニメーションが始まります。
なので、ページ下部の方だから何秒後にアニメーションを開始して…とかいう面倒な事を考える必要がありません。
「その要素が画面に表示されたらの基準」についてですが、「class="animated なんたら"」を指定した個々の要素ではなく、上記に書いた「<div class="animatedParent">」の部分が基準となっているようです。
ページをスクロールするなどしてその「class="animatedParent"」で括った範囲が表示された際にアニメーション開始です。ページを上から見ていって「class="animatedParent"」の範囲が表示された場合もそうですし、逆に下からページを上方向にスクロールして戻った際も同様に、「class="animatedParent"」の範囲が表示されるとまたアニメーションが繰り返し始まります。（アニメーションを1回だけで停止させる方法は後述）
せっかくアニメーションが開始されても、「<div class="animatedParent">」の高さがありすぎると、スクロールしても同divで括ってある下の方のアニメーション付き要素はアニメーションを見ることなく終わるとかいうこともあるかも、です。どこを親要素として 「class="animatedParent"」を指定するべきかその辺りはよく考えて利用しないと勿体ないかも。
言葉で説明するの難しいですね…。その「あかん状況」を下記にサンプルとして置いておきます。「.animatedParent」で括った範囲の高さがビューポートの1画面分を超過しているので下の方はアニメーションされない例です。
ちなみにですが、サンプル等では「<div class="animatedParent">」となっていますが、div以外の他の要素でも大丈夫でした。例えば、ul要素に 「class="animatedParent"」を指定して子要素であるli要素にそれぞれアニメーションを追加する、ということもできます。
また、ページがスクロールしない場合（「class="animatedParent"」で括った範囲がずっと画面上にある）はその場で1回アニメーションを行った後停止します。
もうちょっと凝った使い方
上記の基本的な使い方だけでも十分なのですが、もう少し凝った使い方もできるようです。Extra Functionsとして4つの機能が紹介されていました。
- Sequencing ・・・任意の要素をグループ化してアニメーションの開始をズラしたりできる機能。
- Offset ・・・指定された位置にビューポートが達した時にアニメーションさせることができる機能。
- Animate Once ・・・アニメーションを1回だけにする機能。
- Animation Speed ・・・4種類の速度指定ができる機能。
これらの機能も要素に指定された属性やclass属性を追加するだけで使えます。
Sequencing アニメーションの開始タイミングをズラす
まず親要素の「<div class="animatedParent">」内に「data-sequence="●●"」を追加します。●●の部分はms(ミリセカンド/1000分の１秒)で何秒ごとにアニメーションを開始するのかを指定します。
次に各子要素に「data-id="●"」を追加します。これは先に出てくる要素から順番に指定します。
<div class="animatedParent" data-sequence="500"> <p class="animated bounceInDown" data-id="1">1つ目のp要素</p> <p class="animated bounceInDown" data-id="2">2つ目のp要素（500ms遅れて出てくる）</p> <p class="animated bounceInDown" data-id="3">3つ目のp要素（2つ目の要素から500ms遅れて出てくる）</p> </div>
すると、下記サンプルページのようにdata-idを指定した要素が時差でアニメーションを開始します。
data-idの値部分は、先に出てくる要素を小さな数字、後に出てくる要素ほど大きな数字にしないと動かないみたいなのですが、後に出てくる要素の数字の方が大きいという条件さえ満たせば数を飛ばして指定も可能でした。
<div class="animatedParent" data-sequence="500"> <p class="animated bounceInDown" data-id="1">1つ目のp要素</p> <p class="animated bounceInDown" data-id="2">2つ目のp要素（500ms遅れて出てくる）</p> <p class="animated bounceInDown" data-id="5">3つ目のp要素（2つ目の要素から1500ms遅れて出てくる）</p> </div>
数を飛ばしてdata-idを指定した場合は、飛ばされた数分の秒数も遅れてアニメーション開始となりました。
また、data-sequence指定付きの同じ親要素に括られた子要素で、各子要素毎にアニメーション内容を変える事も可能です。
<div class="animatedParent" data-sequence="500"> <p class="animated bounceIn" data-id="1">1つ目のp要素 bounceIn</p> <p class="animated shake" data-id="2">2つ目のp要素（500ms遅れてアニメーション）shake</p> <p class="animated lightSpeedInLeft" data-id="3">3つ目のp要素（2つ目の要素から500ms遅れてアニメーション）lightSpeedInLeft</p> </div>
Offset 指定された位置にビューポートが達した時にアニメーションさせる
指定した位置に達したら（指定したpxスクロールしたら）アニメーションを開始するには、親要素の「<div class="animatedParent">」内に「data-appear-top-offset="●●"」を追加します。●●の部分はpxで指定できます（単位はなし）。200pxのスクロールが過ぎた後にアニメーションを開始したければ、「data-appear-top-offset=”-200″」とします。
<div class="animatedParent" data-appear-top-offset="-200"> <p class="animated bounceInDown">200pxスクロールしたところで出てきます。</p> </div>
サンプルはちょっとスクロールさせないとアレなのでスクロールバーが出るようにある程度余白とってます。ちょいとスクロールしてみてください。
Animate Once アニメーションを1回のみとする
デフォルトでは１画面内にすべて収まっている時は１回アニメーションすると停止しますが、ページを上下にスクロールして行き来していると「class="animatedParent"」で括られた範囲が表示範囲に入るたびにアニメーションが繰り返されます。
それを１回だけのアニメーションで停止させる指定が「animateOnce」です。
この指定は親要素の「class="animatedParent"」に「animateOnce」を加えてやるだけで指定できます。
<div class="animatedParent animateOnce"> <p class="animated bounceInDown">１度アニメーションが終了するとリピートせず停止したままになります。</p> </div>
こちらのサンプルもちょっとスクロールさせた方が分かりやすいので、スクロールバーが出るようにある程度余白とってます。ちょいとスクロールしてみてください。
Animation Speed アニメーションの速度指定
アニメーションの速度を指定できます。指定できる値は４種類で、「指定なし」「slow」「slower」「slowest」です。言葉の通り、指定なしの状態から順番に遅くなります。
この指定は子要素の「.animated」と「.与えたいアニメーション効果のclass名」に追加で任意のスピードのclassを指定する事で利用できます。
<div class="animatedParent"> <p class="animated bounceInDown">スピードの指定はしていません。</p> <p class="animated bounceInDown slow">slowを指定しています。</p> <p class="animated bounceInDown slower ">slowerを指定しています。</p> <p class="animated bounceInDown slowest">slowestを指定しています。</p> </div>