色の操作：
HEXとステップ数と色相の変化量から色を推移
基準のHEX値から指定したステップ数で色相を変化させる。
String
推移前のHEX値を渡す HEX = 3桁か6桁 (#の有無は不問)
Number1
色相の変化量を指定 -360〜360
Number2
推移全体の段階数を指定 2以上の整数
Number3
取り出す位置(カウント)を指定 0〜(最大：Number2 - 1)
●必須引数 ●オプション引数(省略可能)
記述例
$clrTransitionH('00B5D9', 120, 40, 0)
$clrTransitionH('#00B5D9', 120, 40, 0)
戻り値
指定したカウント時のHEX値を文字列で返す。
動作サンプル
それぞれのNodeの背景色を変化させるサンプル。
31B1BC → 色相 +120° 40段階
#8eb8bd → 色相 -130° 20段階
クリックする度に色相をプラス30°
Javascript :
var count1=0;
function sample1() { //1つ目のサンプルを動かすコード例
var steps=40;
var newColor=$clrTransitionH('31B1BC',120,steps,count1);
$id('sample1').style.backgroundColor="#"+newColor;
if(count1<steps-1) {
count1++;
setTimeout(sample1,50);
}
}
function sample3() { //3つ目のサンプルを動かすコード例
var nowColorHex=$clrStyleRGBTo('HEX',$getStyle('sample3').backgroundColor);
var newColor=$clrTransitionH(nowColorHex,30,2,1);
$id('sample3').style.backgroundColor="#"+newColor;
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。