jQuery Lively Layout - サイト訪問者に強烈なインパクトを残すWebサイトアニメーション
これはインパクト大！が、多用は禁物なようです。 動きのあるWebサイトは目を引きます。Flashや画像を使ったアニメーションは多いですが、jQuery Lively LayoutはさらにWebサイト自体をアニメーションさせてしまうという凄いソフトウェアです。 何はともあれまずは動画を見てもらうのが良いと思います。
ということで凄さは分かってもらえたと思いますので使い方です。まずJavaScriptファイルを読み込みます。
<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.popn-socialbutton.js"></script>
注意点としてアニメーションさせたい要素をvisibility: hiddenで隠しておきます。display: noneでは要素の高さや位置もなくなってしまうので正常動作しなくなります。
// `footer`、`.sidebar-nav`、`.navbar`の要素をアニメーションさせる場合のCSS例
footer,
.sidebar-nav,
.navbar {
visibility: hidden;
}
後はアニメーションの設定と実際の実行になります。
// アニメーション設定
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');
});
そうすると次のようにアニメーションしながらサイトが構築されていくという仕組みです。
動作はIE7以上またはHTML5に対応したモダンなブラウザであれば使えるようです。
あまり激しいアニメーションの場合、毎回表示されているとユーザストレスになってしまうかも知れません。Cookieなりにアニメーションしたかどうかを保存しておいて実行するか否かを判断する方が良いと思います。
とは言え最初に強烈なインパクトを残したい、といった時に使ってみると面白いのではないでしょうか。
jQuery Lively LayoutはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。