HTMLのレイアウト表示をアニメーションで演出するjQueryプラグインを作成しました

HTMLを表示する際に、各パーツごとに左右からビューン、とか上からドスーンみたいなアニメーションを指定できるjQueryプラグインです。って言ってもイミフだと思うのでとりあえずデモをご覧ください。

BootStrapのレイアウトを使用したデモ

jQuery Easing Pluginを使用したダイナミックなアニメーションや回転しながらの移動をサポートしています。IE7以上で動作します(回転はIE9以上)。

こんな感じで呼び出します。

サンプル

// アニメーション設定
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');
});

詳しい設定内容などはGitHubのリポジトリに記載しています。

ダウンロードはこちらからどうぞ。