背景全画面や特定要素に合わせて表示してくれるjQueryプラグイン『BACKSTRETCH』

2013.06.09 Category:jQuery Tag:jQuery

オススメポイントは、軽量で設置もとっても簡単にできるところです。

圧縮されたmin版で4Kほどで、動きもとってもなめらか。

jQueryプラグイン『BACKSTRETCH』

背景だけでなく、特定の要素内でも使え、ただ表示させるだけじゃなくて、フェードで複数の背景を切り替えたりといったことまでできます。

『BACKSTRETCH』DEMO　｜　srobbin

※　デモは、上記リンクから見ることができます。

githubからdownloadもできます。

使い方

1.　上記のURLよりjQueryプラグインをダウンロードします。

2.　jQuery（version 1.7 or newer）とプラグインのファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../js/jquery.backstretch.min.js"></script>

1 2	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../js/jquery.backstretch.min.js"></script>

こうしてjQuery本体とbackstretchを読み込んだ上で

単一の画像を背景ピッタリに表示する場合

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

$.backstretch("./img/background.jpg");

</script>

このように画像ファイルへのパスを指定するだけです。

単一の画像を特定要素にピッタリに表示する場合

<script type="text/javascript">
$("#demo").backstretch("./img/background.jpg");
</script>

$("#demo").backstretch("./img/background.jpg");

</script>

特定要素も背景の場合とあまり変わりませんが、表示させたい要素と画像ファイルへのパスを指定するだけです。

クリックで画像を切り替える場合

<script type="text/javascript">
　　$.backstretch("./img1.jpg", {fade: 500});
	    
	  $("#demo1").click(function (e) {
        e.preventDefault();
	      $.backstretch("./img2.jpg");
	    });
	    
	    $("#demo2").click(function (e) {
        e.preventDefault();
	      $.backstretch("./img3.jpg");
	    });
</script>

　　$.backstretch("./img1.jpg", {fade: 500});

$("#demo1").click(function (e) {

e.preventDefault();

$.backstretch("./img2.jpg");

});

$("#demo2").click(function (e) {

e.preventDefault();

$.backstretch("./img3.jpg");

});

</script>

HTML側には、ボタンを作成しておきます。

<input type="button" id="demo1" value="Show Background img2" />
<input type="button" id="demo2" value="Show Background img3" />

1 2	<input type="button" id="demo1" value="Show Background img2" /> <input type="button" id="demo2" value="Show Background img3" />

これで、ボタンを押すと画像が入れ替えることができます。

スライドショーで複数の画像を切り替える場合

<script type="text/javascript">
  $.backstretch([
      "./img1.jpg"
    , "./img2.jpg"
    , "./img3.jpg"
  ], {duration: 3000, fade: 750});
</script>