最近使ったjQueryプラグイン。
ホームページを制作をしているとユーザーのモニタ環境というのは頭を悩ませるところです。
サイトを見ている人の環境は様々でさらに最近では端末の種類も増えているので、何を基準にしたら良いのか分かりません。
今回紹介するjQueryはそんな悩みをいとも簡単に飛び越えてくれるモニタ環境に合わせて画面いっぱいに背景画像を表示するというプラグイン。
maxImage Scaling Plugin
まずはjQuery本体とmaxImage Scaling Pluginをダウンロードしておきます。
設置場所は任意で。
以下設置の仕方です。
HTML
<body> <img src="画像へのパス" alt="" class="bgmaximage" /> <div id="maincontent"> <div> ここに内容 </div> </div> </body> </html>
CSS
img.bgmaximage {
position:fixed !important;
}
#maincontent {
position: absolute;
top: 0;
left: 0;
z-index: 50;
width: 100%;
}
Javascript
<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
overflow: 'auto',
verticalAlign:'top'
});
});
</script>
これだけでどんなモニタ環境でも画面いっぱいに背景画像が表示されます。
私はまだ使ってませんがパラメータ設定で背景画像をスライドショーにする事もできます。
画面いっぱいに画像が表示されてるだけでもインパクトがあるので、イメージ戦略が大事なブランドサイトなんかには良いかもしれませんね。
maxImage Scaling Pluginを使ってサンプルサイトを作ってみました。
