フェードイン／アウト

JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

フェードイン／アウト
画面の背景色を黒から指定色へ（フェードイン）、
又は指定色から黒へ（フェードアウト）徐々に変化させます。
ココではテスト用にボタンで起動するようにしていますが、
実際には、秒数を指定してその秒数後に自動で実行します。
その他、色を変化させる間隔やスピード等、細かな設定ができます。

FADE_IN #000000 → # 現在の背景色

FADE_OUT # → #000000

※ 上のフォームに好きな色を入力して試すことができます。
※ ネットスケープではフォーム部品などが多少ちらつくようです。
■ フェードインのソース
<script>
// 最終的な背景色 ()内にR,G,Bを10進法で記述
color = new Array(255,0,0); 

// 起動するまでの秒数をミリ秒で記述（1秒=1000ミリ秒）
time = 2000;

// 色を変化させる間隔（値を増やすと滑らかになる）
cnt = 30;

// 色を変化させるスピード（値を増やすと遅くなる）
spd = 20;

val = new Array();
code = new Array();
pch = new Array();
code_smp = "0123456789abcdef";
start_col ="";
c = 0;
function fade() {
   code16 = "";
   for(i = 0; i<=2; i++)
      code16 = code16 + code_smp.charAt((val[i]-(val[i]%16))/16)+code_smp.charAt(val[i]%16);
   document.bgColor=code16;
   for(i=0; i<=2; i++) val[i] = Math.ceil(val[i] + pch[i]);
   for(i=0; i<=2; i++) if(val[i] > code[i]) val[i] = code[i];
   c++;
   if(c <= cnt) setTimeout("fade()",spd);
}

for(i=0; i<=2; i++) val[i] = color[i];
for(i=0; i<=2; i++) code[i] = eval(val[i]);
for(i=0; i<=2; i++) pch[i] = code[i] / cnt;
val[0] = 0; val[1] = 0; val[2] = 0;
for(i=0; i<=2; i++)
   start_col+=code_smp.charAt((val[i]-(val[i]%16))/16)+code_smp.charAt(val[i]%16);
document.bgColor = start_col;
setTimeout("fade()",time);
</script>
■ フェードアウトのソース
<script>
// 最終的な背景色 ()内にR,G,Bを10進法で記述
color = new Array(255,0,0); 

// 起動するまでの秒数をミリ秒で記述（1秒=1000ミリ秒）
time = 2000;

// 色を変化させる間隔（値を増やすと滑らかになる）
cnt = 30;

// 色を変化させるスピード（値を増やすと遅くなる）
spd = 20;

val = new Array();
code = new Array();
pch = new Array();
code_smp = "0123456789abcdef";
start_col ="";
c = 0;
function fade() {
   code16 = "";
   for(i=0; i<=2; i++)
      code16 = code16 + code_smp.charAt((val[i]-(val[i]%16))/16)+code_smp.charAt(val[i]%16);
   document.bgColor=code16;
   for(i=0; i<=2; i++) val[i] = Math.floor(val[i] - pch[i]);
   for(i=0; i<=2; i++) if(val[i] < 0) val[i] = 0;
   c++;
   if(c <= cnt) setTimeout("fade()",spd);
}
for(i=0; i<=2; i++) val[i] = color[i];
for(i=0; i<=2; i++) code[i] = eval(val[i]);
for(i=0; i<=2; i++) pch[i] = code[i] / cnt;
val[0] = code[0]; val[1] = code[1]; val[2] = code[2];
for(i=0; i<=2; i++)
   start_col+=code_smp.charAt((val[i]-(val[i]%16))/16)+code_smp.charAt(val[i]%16);
document.bgColor=start_col;
setTimeout("fade()",time);
</script>
スクリプトを簡潔にするため、初期設定で色のコードを"#ff0000"等の16進数表記ではなく、
"255,0,0"といったRGBを10進数で表記する方法で指定します。
この表記方法がよく解らない方は、下の変換ツールで変換すると便利です。

カラーコード変換ツール
#
, , #

FADE_IN	#000000 → #	現在の背景色
FADE_OUT	# → #000000