読者です 読者をやめる 読者になる 読者になる

なんちゃってウェブ系エンジニアの備忘録

某IT企業で働くなんちゃってウェブ系エンジニアが技術やデザインなど役に立ちそうなものなどを備忘録として載せていきます

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

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

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

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

Jquery本体とBackstretchが必要なので、以下のサイトからダウンロード
f:id:owen11:20130917122654p:plain
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>

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