HTMLを表示する際に、各パーツごとに左右からビューン、とか上からドスーンみたいなアニメーションを指定できるjQueryプラグインです。って言ってもイミフだと思うのでとりあえずデモをご覧ください。
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のリポジトリに記載しています。
ダウンロードはこちらからどうぞ。