jQuery Lively Layout - HTMLのレイアウト表示をアニメーションで演出するjQueryプラグイン

HTMLを表示する際に、各パーツごとに左右からビューン、とか上からドスーンみたいなアニメーションを指定できるjQueryプラグインです。

動きのあるHTMLを実装したい場合にどうそ。でもやりすぎると鬱陶しいかもしれません・・・

使用方法

※ jQueryの他にjQuery Easing Pluginが必要になります。

HTML内で jquery.js 、 jquery.easing.js 、 jquery.lively-layout.js を読み込みます。

 <script type="text/javascript" src="/path/to/jquery.js"></script>
 <script type="text/javascript" src="/path/to/jquery.easing.js"></script>
 <script type="text/javascript" src="/path/to/jquery.lively-layout.js"></script>

アニメーション表示させたい要素をCSSでvisibility: hiddenで非表示状態にしておきます。

※ display: noneでは非表示の要素の位置やサイズも消えてしまう為、正常に動作しません。
```
 // `footer`、`.sidebar-nav`、`.navbar`の要素をアニメーションさせる場合のCSS例
 footer,
 .sidebar-nav, 
 .navbar {
   visibility: hidden;
 }
```

アニメーション設定の配列 と 完了時のコールバック関数 を引数に$.livelyLayoutをコールします。

 // アニメーション設定
 var config = [{
   element: 'footer',
   from: { right: -1 },
   easing: 'easeOutBounce',
   wait: false
 }, {
   element: '.sidebar-nav',
   from: { left: 100, top: 20, color: '#ff0000' },
   easing: 'easeOutBounce',
   complete: function (defaultPosInfo, startCss) {
     $(this).addClass('loaded');
   },
   wait: true
 }, {
   element: '.navbar',
   from: { top: -1 },
   rotate: { rev: 3, type: 'X', direction: 'left' },
   easing: 'easeOutBounce',
   wait: false,
   delay: 100
 }];

 // アニメーション実行
 $.livelyLayout(config, function () {
   // アニメーション完了
   alert('complete');
 });

API解説: $.livelyLayout(config[, callback])

第1引数: config (必須)

各要素のアニメーション表示設定の配列を指定します。指定できるオプションは以下の通りです。

element (必須)

アニメーションさせる要素の指定です。$('...')の'...'にあたる部分を指定します。

ここで指定した要素は事前にCSSでvisibility: hiddenにされている必要があります。
```
  // idが'side-bar'の要素をアニメーション表示させる
  element: '#side-bar',
```

from

$(element)をアニメーション表示させる際のスタンバイ位置や初期状態を指定します。

top、leftなどの位置指定の他、CSS設定(colorなど)の指定が可能です。

なお、top、bottom、left、rightに関しては0未満の数値を指定する事によってその方向の画面外に初期配置することができます。

  // 初期位置画面左上から登場してアニメーションで本来のレイアウト位置に移動する
  from: { top: 0, left: 0 },

  // 初期位置画面右(画面外)から登場してアニメーションで本来のレイアウト位置に移動する
  from: { right: -1 },

  // 初期位置画面左下(画面外)から文字色赤で登場してアニメーションで本来のレイアウト位置に移動する
  // (アニメーション完了時に文字色は解除される)
  from: { bottom: -1, left: -1, color: '#ff0000' },

to

デフォルトでは各要素は本来の表示位置に移動しますが、移動先を変更したい場合に指定します。ただし、toで指定した移動先や状態はアニメーション完了時に本来のレイアウト位置・状態に戻ります。

アニメーションさせたい要素の親などがposition: relativeやposition: absoluteになっていると、移動先の座標位置がずれてしまうので、そういった場合に無理矢理移動先を修正する場合などに使用します。
```
  // 'position: relative'である'.parent-box'内の'.child-button'の移動先を修正
  to: {
    left: $('.child-button').offset().left - $('.parent-box').offset().left,
    top: $('.child-button').offset().top - $('.parent-box').offset().top
  },
```
また、.parent-boxがposition: staticだったとしても.parent-boxがアニメーション対象の場合は、内部処理で一時的にposition: absoluteにされるので、親子で別々のアニメーションを同時に行う場合にもこういったtoによる調整が必要になります。
easing

アニメーションのタイプを指定します。指定できるタイプはこちらを参考にしてください。省略時のデフォルトはswingです。
```
  // 緩急なし
  easing: 'linear',

  // 移動先に到着したときにバウンドさせる
  easing: 'easeOutBounce',
```
rotate

アニメーション中に要素を回転させます。以下の3項目を指定します。
- type
  
  回転のタイプを指定します。
  - '' or Z or 指定なし
    
    通常の2D回転です。
  - 'X'
    
    X軸回転です。
  - 'Y'
    
    Y軸回転です。
- rev
  
  移動先に到着するまでの回転数です。デフォルトは1です。
- direction
  
  右回りと左回りの指定です(right or left)。デフォルトはrightです。
なお、rotateは IE8以下 では動作しません。
```
  // 左回りで1回転しながら移動
  rotate: {
    direction: 'left'
  },

  // 右回りにX軸で10回転しながら移動
  rotate: {
    type: 'X',
    rev: 10
  },
```
duration

アニメーションで移動先に到着するまでの時間(ミリ秒)を指定します。デフォルトは1000です。
```
  // 3秒かけてゆっくりと移動
  duration: 3000,

  // 一瞬でシュバッと移動
  duration: 100,
```
wait

falseを指定した場合、この要素のアニメーションが完了する前に次に指定した要素のアニメーションを開始します。同時に複数の要素をアニメーションさせたい場合に使用します。デフォルトはtrue(1要素ずつアニメーションさせる)です。
delay

アニメーション開始までの待機時間です。他の要素とほぼ同時に移動を開始させたいけど、ちょっとだけずらしたい場合などに使用します。
complete

この要素のアニメーションが完了したときに呼ばれるコールバック関数です。引数には以下の2つが渡されます。

※ 引数の情報はどちらかというとデバッグ用の色が強いのであまり使い道はないかもしれません。
- defaultPosInfo
  
  本来のレイアウト上でのその要素の位置情報です。
- startCss
  
  アニメーション開始時にその要素に設定された一時的なCSS情報です。全アニメーション完了後にこのCSS情報は解除されます。
また、このコールバック関数内のthisはその要素のjQueryオブジェクトです。
```
  // 要素の移動完了後に'loaded'クラスを付加
  complete: function (defaultPosInfo, startCss) {
    $(this).addClass('loaded');
  },
```

第2引数: callback (省略可能)

configで指定した全要素のアニメーション処理が完了したときに呼ばれます。引数はありません。

対応ブラウザ

モダンブラウザ
IE7以上

なお、jQueryは最新版でのみ動作確認しています。

既知の問題点もしくは仕様

アニメーションさせたい要素が他の要素の配下にあり、かつその親要素がposition:relativeやposition:absoluteだった場合は表示位置がずれます。アニメーションさせる要素は一時的にposition:absoluteになるので、その基点はhtmlのトップレベルである必要があります。
ある要素とその子要素を同じ$.livelyLayout()内でアニメーションさせると子要素の表示位置がずれます(親要素がアニメーションのために一時的にposition: absoluteになり、子要素の移動先の座標がHTMLのトップレベルではなく、親要素が基点になってしまうため)。

これらの問題点は将来的には自動的に調整できたらいいなーとは考えていますが、現状ではこういったケースでは座標のずれる要素のtoオプションで移動先を調整する必要があります。

Changelog

0.1.0 (2013-07-19)

初版リリース

ライセンス

MIT licenseで配布します。

ktty1220 / jquery.lively-layout