レスポンシブなフルスクリーン画像（切り替え効果付き）を背景に「Unobtrusive Background Image Switcher」 - jQueryプラグイン
当ページのリンクには広告が含まれています。
スポンサーリンク
切り替え効果付きのレスポンシブなフルスクリーン画像を背景にすることができるプラグイン「Unobtrusive Background Image Switcher」を紹介します。
Unobtrusive Background Image Switcher
このプラグインを使えば、レスポンシブなフルスクリーン画像を背景に、あるいは指定したサイズで画像を設置することができます。また、複数の画像を設定して切り替えることもできるので、おすすめプラグインです。
スポンサーリンク
デモでは、単色画像を背景に設定しています。ブラウザの幅を縮めてレスポンシブの挙動を確認してみてください。また、しばらくすると背景の画像が切り替わるので、そちらも確認してみてください。
「Unobtrusive Background Image Switcher」のデモ
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unobtrusive Background Image Switcher - jQueryプラグインまとめのカルマ</title>
<link type="text/css" rel="stylesheet" href="style-fullscreen.css" media="all" />
<style>
h1 { position:absolute; }
</style>
</head>
<body>
<div id="bg-body">
</div>
<h1>Unobtrusive Background Image Switcherのデモでーす。</h1>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery.bcat.bgswitcher.min.js"></script>
<script>
var srcBgArray = ["img/1.png","img/2.png","img/3.png"];
$(document).ready(function() {
$('#bg-body').bcatBGSwitcher({
urls: srcBgArray,
alt: 'Full screen background image'
});
});
</script>
</body>
</html>
jsファイルのダウンロードやその他オプションはこちらからどうぞ。
» Unobtrusive Background Image Switcher
スポンサーリンク