背景色を定期的に切り替える「jquery.color.js」ランダムカラーとカラー指定

公開日:  最終更新日:2015/12/16

背景色を定期的に切り替える「jquery.color.js」ランダムカラーとカラー指定
以前の記事で背景画像を切り替える方法について紹介しました。


関連する内容になりますが、背景色を動的に切り替える方法について調べてみました。

スポンサードリンク

jquery.color.jsで背景色を定期的にアニメーションしながら変更する方法

背景色を指定秒数ごとに自動的に切り替える方法として
・ランダムに背景色が切り替わる
・指定した色に背景色が切り替わる
のサンプルソースを2つ準備しました。
実際に使う場面は少ないかもしれませんが、表現方法の1つとして覚えておいても良いかもしれません。

実装方法について「jquery.color.js」

jquery.color.jsのダウンロードサイト
jquery/jquery-color · GitHubより、赤枠のボタンをクリックしてファイルをダウンロードしてください。
ダウンロードボタンの位置
ダウンロードしたファイルの中から「jquery.color.js」を使います。


また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

背景色を指定秒数ごとにランダムな色に切り替える

実装サンプル1
サンプルソース sample1.html

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.color.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setAutoRndColor();
});
function setAutoRndColor(){
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#box').animate({
backgroundColor: hue
}, 5000);
setAutoRndColor();
}
</script>
<div id="box">背景色が定期的に変わります ランダムな色が切り替わっていきます</div>

1行目、2行目でjquery関連のファイルを読み込んでいます。パスは各自の保存場所に合わせてください。このサンプルは、htmlファイルと同一フォルダにjquery関連のファイルがある状態です。

3行目から14行目がスクリプトに関する記述をしています。

8行目で色情報を生成しているのですが、RGB形式の値を生成しています。
こんな感じの → rgb(255,255,255)
指定秒数ごとに3つのランダムな値を生成することで背景色を毎回違う色にしています。

9行目の $(‘#box’).animate({ の#box部分 背景色を変更したい要素のID属性を指定してます。

11行目の5000となっている部分が切り替わる秒数を指定してます。5000→5秒になるので切り替えたい秒数に書き換えてください。

19行目から24行目はCSSの記述です。
※ブラウザによっては、要素のデフォルトの背景色の指定がない場合はエラーになることがあるかもしれませんので背景色をCSS等で指定しておいた方が良いと思います。

22行目から25行目がこのサンプルで背景色を切り替えたいDIV要素の記述です。<div id=”box”>としてID属性を指定しています。これは9行目のスクリプト記述で指定するIDと揃える必要があります。

サンプル

背景色を予め決めた色に指定秒数ごとに切り替える

実装サンプル2

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.color.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setAutoColorChange();
});
function setAutoColorChange(index) {
var colorlist = ["#000000", "#191970", "#008000", "#8b0000", "#4b0082", "#ff00ff", "#808080"];
if (!index || index > (colorlist.length - 1)) {
index = 0;
}
var color = colorlist[index];
$('#box').animate({
backgroundColor: color
}, 3000);
setAutoColorChange(++index);
}
</script>
<div id="box">背景色が定期的に変わります 予め決めた色に順次切り替わっていきます</div>

1行目、2行目でjquery関連のファイルを読み込んでいます。パスは各自の保存場所に合わせてください。このサンプルは、htmlファイルと同一フォルダにjquery関連のファイルがある状態です。

3行目から18行目がスクリプトに関する記述をしています。

8行目であらかじめ色情報を指定しています。背景色にしたい色を記述してください。”#000000″, “#191970”,・・・・・ という感じで「,」カンマでカラーコードを区切っていきます。

13行目の $(‘#box’).animate({ の#box部分 背景色を変更したい要素のID属性を指定してます。

15行目で 3000 と指定している部分が切り替える秒数を指定しています。3000→3秒です。予め指定した色に順次切り替えて行きます。最後までいくと、また最初の色に戻ります。

サンプル


いかがでしょうか。頻繁に使うことはないと思いますが、表現方法としては面白いのではないでしょうか。ぜひ、活用してみてください。

背景関連の別記事もよろしければご覧ください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑