jquery.backstretch.jsを使ってブラウザサイズに合わせて複数の背景画像を切り替え表示する方法

jquery.backstretch.jsを使ってブラウザサイズに合わせた複数の背景画像を切り替え表示する方法をご紹介します。
指定した複数のjpg背景画像を指定秒数でフェード切替してみます。

ブラウザサイズに合わせた複数の背景画像を切り替え表示するCSSの記述

※特に指定は無いので、必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:800px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

jquery.backstretch.jsを使ってブラウザサイズに合わせた複数の背景画像を切り替え表示するJavaScriptの記述

※jquery.min.js、jquery.backstretch.jsファイルを読み込みます。$.backstretch([切替画像ファイル名], {切替オプション})を指定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.backstretch.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$.backstretch([
		"i1.jpg",
		"i2.jpg",
		"i3.jpg"
		], {
		fade: 500,
		duration: 3000
	});

});
</script>

ブラウザサイズに合わせた複数の背景画像を切り替え表示するHTMLの記述

※特に指定は無いので、必要に応じて変更して下さい。

<div class="clWrap">
	<h1>ブラウザサイズに合わせて複数のjpg背景画像を切り替え表示します。</h1>


</div>

jquery.backstretch.js：ブラウザサイズに合わせて複数の背景画像を切り替え表示するデモページ

jquery.backstretch.js：ブラウザサイズに合わせて複数の背景画像を切り替え表示するデモ

ソース元：Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page

解像度が高い画像を多く使い過ぎると始めの読込に時間が掛かる可能性がありますね。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告