SPECTRUM - jQuery Plugin

指定した複数の背景色をスムーズにグラデーション変化させるjQueryスクリプト［Spectrum］を紹介します。

SPECTRUM : http://www.andreacrofts.codes/spectrum/

背景色がどのように切り替わっていくのか、上記サイトのデモをご覧になると一目瞭然ですね。

実装方法は簡単です。

［SPECTRUM］の使い方

はじめにGitHubから「jquery.spectrum.js」をダウンロードしてきましょう。
URLはコチラです。

GitHub : SPECTRUM

右上にある「Download ZIP」をクリックするとスグにダウンロードがはじまります。

このJSファイル「jquery.spectrum.js」を<body>〜</body>タグの末尾で読み込みます。
もちろんjQueryに依存するスクリプトですのでGoogleのCDNにホストされている「jquery.js」も先に読み込んでおきましょう。
さらに続けて［SPECTRUM］の初期設定も記述します。
一連のHTMLコードは次のようになりますね。

<body>
<div id="spectrumPlugin">Contents</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="js/jquery.spectrum.js"></script>
<script>
$(function(){
	$('#spectrumPlugin').spectrum();
});
</script>
</body>

上記コード内、ここでは div id="spectrumPlugin を指定している要素に［SPECTRUM］を効かせます。
$('#spectrumPlugin').spectrum(); の箇所ではその要素を指定しています。

以上、ここまでの設定で実装完了。

詳細設定

背景で使用する色や切り替わっていくタイミングはJavaScriptとCSSで設定します。

スピード調節

色が切り替わっていく間隔はCSSで指定できます。

スクリプトによって該当する要素に「.spectrumHeader」というクラス名が付与されているので、次のように記述してスピードを調節可能。

.spectrumHeader {
transition:3s ease;
}

この場合は3秒間隔で切り替わっていきます。

使用する背景色を指定。

背景で使われる色は最初からプラグインのコアファイル内に記述されています。

デフォルトでは、オレンジ、ピンク、イエロー、グリーン、ブルーの全５色が指定されていますね。
コアファイル内では次のように書かれています。

var colourArray = [
	// Colour 1 - Orange
	{
		src: 'colour1',
		colour: 'rgb(252,115,49)'
	},
	// Colour 2 - Pink
	{
		src: 'colour2',
		colour: 'rgb(236,0,140)'
	},
	// Colour 3 - Yellow
	{
		src: 'colour3',
		colour: 'rgb(241,196,15)'
	},
	// Colour 4 - Green
		{
		src: 'colour4',
		colour: 'rgb(95,178,106)'
	},
	// Colour 5 - Blue
	{
		src: 'colour5',
		colour: 'rgb(113,137,255)'
	}
];

これを上書きするカタチで使いたい背景色を指定します。
一例を挙げると次のようになりますね。

var colourArray = [{
	src: 'colour1',
	colour: 'rgb(252,115,49)'
}];

サンプル

実際に上記の例を用いてサンプルを作りました。
ご参考にどうぞ。

サンプル : https://on-ze.com/demo/jquery-spectrum/