背景色を徐々にアニメーションで変更できるjQueryプラグイン「Spectrum」!

2016/02/13

こんにちは。
今回は背景色を徐々にアニメーションで変更できるjQueryプラグイン「Spectrum」!です。

背景の色を段々とアニメーションして切り替える事ができるおもしろいjQueryプラグインを紹介します。

背景色を徐々にアニメーションで変更できるjQueryプラグイン「Spectrum」!

Spectrum

spectrum

 

jQueryプラグイン「Spectrum」をダウンロードしてみよう!

https://github.com/andreacrofts/spectrum-pluginにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「Spectrum」を設置してみよう!

jQuery本体とjquery.spectrum.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
先ほど指定した「spectrumPlugin」というidを付けます。

 

色を指定したい時は下記のように記述します。

 

スピードを調節したい場合は下記のように記述します。
4sだと4秒間隔で切り替わります。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。すごくきれいでどこかで使いたいですね
以上で背景色を徐々にアニメーションで変更できるjQueryプラグイン「Spectrum」!でした。

RELATED POST