最近のWeb制作において、「ページ表示時に少しの時間だけブラウザ画面中央に情報を表示したい」というご要望を受けました。
スマートフォンアプリなどでよく見る、画面中央に表示される広告みたいなイメージですね。
あまり難しいことはしなくてもできちゃいます。
今回は、自分の勉強も含め、それをjQueryプラグイン化したので公開しちゃおうと思います。（念のため、クライアントの許可は得ています。）
jquery.centerZoom.js
ダウンロードは以下から
ライセンスはMITとします。
動作のデモは以下です。
使い方
まず表示したい要素をHTMLで記述してください。
bodyタグ直下（構造的な意味での）に記述することを想定しています。
おそらく「</body>」の直前に置くといいと思います。
<body>
<!-- 他の記述 -->
<div id="front-panel"><img src="img/cloud.jpg" /></div>
</body>
</html>で、JavaScriptの記述ですが、基本的にその要素でcenterZoomを実行するだけです。
$('#front-panel').centerZoom();これでページ表示した後、少しの間その要素が表示されます。
オプションは以下です。
| オプション名 | 説明 | 例 |
|---|---|---|
| rate | 画面に対する割合（%） | 95 |
| resize_adjust | ブラウザウインドウにリサイズ時にその要素もリサイズするかどうか | true |
| fadein | フェードインするかしないか | true |
| delay | 表示の遅れ（ms） | 500 |
| display_time | 表示する時間（ms） | 4000 |
ご質問、ご要望などありましたらご遠慮なく以下コメントまたはお問い合わせから。
