背景色をスムーズに変化させるjQueryプラグイン「jquery-color」

背景色を緩やかに変化させることができるプラグインの紹介です。

何気ない変化にサイトへの「こだわり」が見えてきますよね。

DEMO(デモ)

ダウンロード

※ ver 2.1.2時点の内容です。

ソースコードはgithub上で管理されています。
jquery/jquery-color

右上の「Download zip」からダウンロードしてください。

使い方

ライブラリを読み込む

jQueryに依存しますのでjQueryを先に読み込むことを忘れないようにしましょう。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.color.js"></script>

表示させるアイテム

javascript側で要素を選ぶので、なんでもOKです。
(適当にcssも当ててます)

<div id="color"></div>
<style>
#color {
	width: 100%;
	height: 300px;
}
</style>

jquery-colorの設定

<script>
jQuery( function($) {
	setAutoColorChange();

	function setAutoColorChange(index) {
		var colorlist = ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B", "#000000"];
		if (!index || index > (colorlist.length - 1)) {
			index = 0;
		}
		var color = colorlist[index];
		$('#color').animate({
			backgroundColor: color
		}, 3000);
		setAutoColorChange(++index);
	}
});
</script>

colorlistで色を指定していきます。ここに指定した色に順番に移り変わっていくイメージです。何色でも指定できます。

$('#color').animate({ backgroundColor: color }, 3000);の値で、色が移り変わる速度を指定しています。

おわり


背景色をスムーズに変化させるjQueryプラグイン「jquery-color」を紹介しました。

あまり目立つものではないですが、ふと気づくと「色が変わっている!」という変化が好きなので、同じような感覚の方はぜひ取り入れてみてください!

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事