今日の人気記事

  1. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  2. 検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」
  3. 1年分のカレンダーを表示「BIC Calendar」

レスポンシブなフルスクリーン画像(切り替え効果付き)を背景に「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

スポンサーリンク

関連記事(一部広告含む)