色の操作：
前後のHEXとステップ数を指定して色を推移
2色の情報を渡し、指定したステップ数で変化させるための色情報を生成する。
rgbaを指定すれば、透明度の推移も取得可能。
String1
推移前の色を渡す HEX = 3桁か6桁 (#の有無は不問) ・ rgba = rgba(r,g,b,a)
String2
推移後の色を渡す HEX = 3桁か6桁 (#の有無は不問) ・ rgba = rgba(r,g,b,a)
Number1
推移全体の段階数を指定 2以上の整数
Number2
取り出す位置(カウント)を指定 0〜(最大：Number1-1)
Bool
HEXを返す場合に#を付加する true = 付ける ・ false = 付けない ／ 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)
記述例
$clrTransition('FFF', '000', 50, 0)
$clrTransition('#677788', '#188467', 10, 5, true)
$clrTransition('rgba(255,255,255,1.0)', 'rgba(255,128,0,0.3)', 30, 15)
戻り値
○両方の色をHEXで指定した場合
・指定したカウント時のHEX値を文字列で返す。
○どちらかでもrgbaで指定した場合
・指定したカウント時のrgba値を文字列で返す。
動作サンプル
それぞれのNodeの背景色を変化させるサンプル。
FFFFFF → 000000 50段階
#8eb8bd → #bdb88e 20段階
rgba(49,177,188,1) → rgba(49,177,188,0)
20段階
20段階
#bd8e9e → rgba(142,184,189,1.0)
30段階
30段階
Javascript :
var count1=0;
function sample1() { //1つ目のサンプルを動かすコード例
var steps=50;
var newColor=$clrTransition('ffffff','000000',steps,count1,true);
$id('sample1').style.backgroundColor=newColor;
if(count1<steps-1) {
count1++;
setTimeout(sample1,50);
}
}
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。