さぁ、サイトを下からグイッっとパンしてサイトのロゴがドーン!する新しいjQueryプラグインを考えてみた

Javascript

本当に新しいかどうかはわからないのですが、タイトル通り「サイトを下からグイッっとパンしてサイトのロゴがドーン!」という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になります。

「てさぐれ!部活もの」面白いのでオススメです。