背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery Backstretch」を試してみました。ただ表示させるだけじゃなくて、フェードで複数の背景を切り替えたりといったことまでできます。使い方はめちゃくちゃ簡単です。全画面の背景画像はとてもインパクトあってかっこいいですね。
[ads_center]
jQuery Backstretchの使い方
下記のURLよりダウンロードします。
あとはjQueryとプラグインのファイルを読み込んで画像のパスを指定すればいいだけです。
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("sample.jpg");
</script>
これだけでブラウザのサイズに合わせた背景画像が表示されます。とても便利です。
スライドショーで複数の画像を切り替えてみる
フェードで切り替わるスライドショーもできちゃいます。お好みのスピードなども簡単に調整可能です。
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
var images = [
"sample1.jpg",
"sample2.jpg",
"sample3.jpg"
];
$(images).each(function(){
$('<img/>')[0].src = this;
});
var index = 0;
$.backstretch(images[index], {speed: 1000});
setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
</script>
var imagesに、スライドショーで使用したい画像を指定します。画像が切り替わる時のアニメーションのスピードを変更する場合は以下の部分を変更します。
$.backstretch(images[index], {speed: 1000});
上記の1000という数値を変更します。数値が低い程速く、高い程遅くなります。また、画像が切り替わる間隔のスピードを変更したい場合はこちらを変更します。
$.backstretch(images[index]);
}, 5000);
この、5000という数値を変えると変更できます。こちらも数値が低い程速く、高いほど遅くなります。フェードで画像が切り替わっていきます。
特定の要素をクリックで画像を切り替える
自分で指定した要素をクリックすると画像が切り替わるようにすることもできます。こんな感じで指定してみます。
JavaScript
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("sample1.jpg", {speed: 500});
$("#image1").click(function() {
$.backstretch("sample1.jpg");
});
$("#image2").click(function() {
$.backstretch("sample2.jpg");
});
</script>
HTML
<input type="button" id="image1" value="サンプル画像1" /> <input type="button" id="image2" value="サンプル画像2" />
これで、image1がついたidをクリックするとsample1.jpgという画像が、image2がついたidをクリックするとsample2.jpgがフェードで切り替わります。ちなみに上記のスクリプトはヘッダーに記述するとうまく動作しませんでした。フッターに書いたらうまく動きました。クリックする要素より下に記述する必要があるかもです。
こちらも画像が切り替わるアニメーションのスピードを変更したい場合には以下の部分の数値を変更します。
$.backstretch("sample1.jpg", {speed: 500});
先程と同様に500に設定している数値を変更すればアニメーションのスピードが変わります。数値が低いほど速く、高いほど遅くなります。こんな感じでjQuery Backstretchだけで色んなことができちゃいますね。背景に画像を表示したい時は是非活用してみたいです。
