Backstretchを使ってフルスクリーン(背景画像)表示

最近のWEBサイトは、大きな写真を背景に使ったり、フルスクリーンで画像を
表示させるものが流行っているようですね…

レスポンシブwebデザイン とも相性が良く、フルスクリーンのWEBサイトは今後増えていくことが想定されます。

Jquery系のライブラリであるBackstretchを使って、ブラウザのサイズに合わせて背景画像サイズを変更してくれる素晴らしいスクリプトが出てきたので、
まとめておきます。

Jquery本体とBackstretchが必要なので、以下のサイトからダウンロード

Backstretch

JS読み込み

<script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.backstretch.min.js"></script>

Jquery本体が必要なので、Googleがホスティングされているものを
使いましょう。

表示したい背景画像の指定

<script type="text/javascript">
$.backstretch("sample01.jpg");
</script>

使い方はたったこれだけなんです！
便利でしょ！

さらに…
背景画像をいくつか追加することでスライドショーもできちゃうんです！

<script type="text/javascript">
$(function(){
$.backstretch(
	[
	  "sample01.jpg",
      	  "sample02.jpg"
  	], 
　　　　 // 表示時間：XX, 透過：　XX
	{duration: 3000, fade: 1250}
);
});
</script>

実際作成したものはコチラからご覧いただけます。