一定時間だけ画面の中央に要素を表示するjQueryプラグイン

最近のWeb制作において、「ページ表示時に少しの時間だけブラウザ画面中央に情報を表示したい」というご要望を受けました。

スマートフォンアプリなどでよく見る、画面中央に表示される広告みたいなイメージですね。

あまり難しいことはしなくてもできちゃいます。

今回は、自分の勉強も含め、それをjQueryプラグイン化したので公開しちゃおうと思います。(念のため、クライアントの許可は得ています。)

jquery.centerZoom.js

ダウンロードは以下から

jquery.centerZoom.jsダウンロード

ライセンスはMITとします。

動作のデモは以下です。

jquery.centerZoom.jsデモ

使い方

まず表示したい要素を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

ご質問、ご要望などありましたらご遠慮なく以下コメントまたはお問い合わせから。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます