今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. 入力に応じてテキストエリアの高さを調節「Autosize」
  3. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

背景画像や色をランダムに変更「RandomBackground」

スポンサーリンク

背景画像や色をランダムに変更するプラグイン「RandomBackground」を紹介します。

jQueryプラグイン「RandomBackground」

このプラグインを使えば、指定した要素の背景画像や色をランダムに変更することができます。

変更したい画像や色をオプションでいくつか指定すると、ページが更新されるたびに指定したものの中からランダムに変更します。

他にもオプションで ID やクラス名、画像のパスを指定します。

スポンサーリンク

それではデモページをご覧ください。何度かページを更新してみてください。

「RandomBackground」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="RandomBackground のデモでーす。">
<title>RandomBackground - jQuery Plugin - Demo</title>
</head>
<body class="demo">
<h1>RandomBackground のデモ。</h1>
<p>ページを更新してみてください。</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.randombackground.min.js"></script>
<script>
$(document).ready(function() {
  randomBackground.init({
    parent: '.demo',
    background: '.demo',
    path: 'images/',
    images: [
      '01-red.png',
      '02-orange.png',
      '03-yellow.png',
      '04-green.png',
      '05-blue.png',
      '06-indigo.png',
      '07-purple.png'
    ],
    bgcolor: ['#000', '#ccc', '#fafafa'] });
});
</script>

<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/randombackground/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

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