サイトのロゴはそのサイトを表す重要なものです。ただレイアウト的にはサイトの上部にちょこんとあるぐらいで、いろいろなサイトを見慣れてる人は スルーしているかもしれません。しかしせっかく作ったんだから見てほしい！そのニーズに答えたのがこのプラグインです。
デモ
どのようなものかこちらのデモをご覧ください。確認ブラウザはこの記事を書いた当時のIE・Firefox・Chromeの最新版です。
これでバッチリ、サイトのロゴがアピール出来ましたね。
使い方
以下のライブラリを読み込みます。
<script type="text/javascript"src="jquery.js"></script><script type="text/javascript"src="jquery.transform.js"></script>
<script type="text/javascript"src="standup.js"></script>このあとにJavaScriptが起動するように以下の記述をします。
<scripttype="text/javascript">$(function(){$('body').standup();});</script>
最終的なソースはこちら
<script type="text/javascript"src="jquery.js"></script><script type="text/javascript"src="jquery.transform.js"></script><script type="text/javascript"src="standup.js"></script><script type="text/javascript">$(function(){$('body').standup();});</script>HTML
HTMLではドーン！と表示したいサイトのロゴにid="titleLogo"を指定します。
CSS
サイトのロゴ（#titleLogo）にwidthを指定して下さい。width:100%;だとその要素の真中にドーンします。※オプションでドーンする場所の調整ができます。
#titleLogo{width:200px;}これで上記のデモのような動きになります。
オプション
オプションを設定することで、ドーンの位置を変えたり大きさを変えることができます。
<script type="text/javascript">$(function(){$('body').standup({id:'#titleLogo',//サイトのロゴのidをtitleLogo以外にしたい場合にここの記述。idとあるけど、classでも可。scale:3,//ドーンする拡大値。ロゴの大きさによるが2～4ぐらいが適当。left:false,//widthが広い場合に、trueにするとその要素の左端にドーンするようの設定。right:false,//widthが広い場合に、trueにするとその要素の右端にドーンするようの設定。adjust:0//上記の左右端にドーンすると要素の端が画面中央にくるので位置微調整用の項目。左に100px動かすならなら「-100」。右に100px動かす場合は「100」と入れる。});});</script>左寄せのデモ
<script type="text/javascript">$(function(){$('body').standup({left:true,adjust:-100});});</script>右寄せのデモ
<script type="text/javascript">$(function(){$('body').standup({right:true,adjust:100});});</script>元ネタ
お気づきのかたも多いと思いますが、元ネタはこちらのアニメのOPになります。