本当に新しいかどうかはわからないのですが、タイトル通り「サイトを下からグイッっとパンしてサイトのロゴがドーン！」というjQueryプラグインを作りました。その名もstandup.jsです。
サイトのロゴはそのサイトを表す重要なものです。ただレイアウト的にはサイトの上部にちょこんとあるぐらいで、いろいろなサイトを見慣れてる人は
スルーしているかもしれません。しかしせっかく作ったんだから見てほしい！そのニーズに答えたのがこのプラグインです。
デモ
どのようなものかこちらのデモをご覧ください。確認ブラウザはこの記事を書いた当時のIE・Firefox・Chromeの最新版です。
これでバッチリ、サイトのロゴがアピール出来ましたね。
使い方
JavaScript
以下のライブラリを読み込みます。
<script type="text/javascript" src="jquery.js"></script> //jQuery（今回はバージョン1.11.3を使用しています）
<script type="text/javascript" src="jquery.transform.js"></script> //transformをanimateさせるのに使用します。
そしてstandup.jsを最後に読み込みます。ダウンロードはこちら。（右クリックで名前を付けて保存かソースをコピぺして下さい。）
<script type="text/javascript" src="standup.js"></script>このあとにJavaScriptが起動するように以下の記述をします。
<script type="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になります。
「てさぐれ！部活もの」面白いのでオススメです。
コメント