Fadein

Description:

背景がフェードインします。

白から黒や赤から白、青から緑などお好みのフェードインをさせる事が出来ます。

Demo:

デモを見る。

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>


<script language="JavaScript" type="text/javascript">
<!--

function fadeinGetColor(scol, fcol, steps, count) {
 scol = (scol.charAt(0)=="#") ? scol.substring(1, scol.length) : scol;
 fcol = (fcol.charAt(0)=="#") ? fcol.substring(1, fcol.length) : fcol;
 var scol_red  = parseInt(scol.substring(0,2), 16);
 var scol_green= parseInt(scol.substring(2,4), 16);
 var scol_blue = parseInt(scol.substring(4,6), 16);
 var fcol_red  = parseInt(fcol.substring(0,2), 16);
 var fcol_green= parseInt(fcol.substring(2,4), 16);
 var fcol_blue = parseInt(fcol.substring(4,6), 16);
 var new_red   = Math.round(((fcol_red  - scol_red)  / steps) * count) + scol_red;
 var new_green = Math.round(((fcol_green- scol_green)/ steps) * count) + scol_green;
 var new_blue  = Math.round(((fcol_blue - scol_blue) / steps) * count) + scol_blue;
 new_red  = (new_red.toString(16).length==1) ? "0"+new_red.toString(16) : new_red.toString(16);
 new_green= (new_green.toString(16).length==1) ? "0"+new_green.toString(16) : new_green.toString(16);
 new_blue = (new_blue.toString(16).length==1) ? "0"+new_blue.toString(16) : new_blue.toString(16);
 return "#"+ new_red+new_green+new_blue;
}

function fadein(scol, fcol, steps, time, func, count) {
 if(navigator.appName=="Netscape" && !document.images) { return; }
 if(!count) { count = 0;  }
 if(!time)  { time  = 30; }
 if(!func)  { func  = ""; }
  
 document.bgColor = fadeinGetColor(scol, fcol, steps, count);

 if(++count <= steps) {
  setTimeout("fadein('" +scol+ "','" +fcol+ "'," +steps+ "," +time+ ",\"" +func+ "\"," +count+ ")", time);
 } else { if(func) eval(func); }
}

//fadein("初めの色", "終わりの色", "変化回数", "変化のスピード")
fadein("#ffffff","#ff0000", 30, 30);

//-->
</script>


</head>

<body>

フェードイン。



</body>
</html>

Advice:

スタイルシートで "background-color" が定義されている場合は 正常に動作しませんのでご注意下さい。

Arrangement:

フェードイン終了後にリンク [デモ]

フェードイン終了後に自動的にリンクします。

fadein("#ffffff","#ff0000", 30, 30, "location.href='http://www.yahoo.co.jp/';");

フェードインの繰り返し [デモ]

フェードインを繰り返し行うようにするには、以下のように書き換えます。 延々とループを繰り返したい場合は fadein_loop を true に設定して下さい。

function fadeinScheduler() {
 var scol = fadein_setcolor[fadein_current];
 var fcol = fadein_setcolor[fadein_current+1]
 if(!fcol) {
  if(!fadein_loop) {
    if(fadein_url !="") { location.href = fadein_url; }
    return;
  }
  fcol = fadein_setcolor[0];
  fadein_current = -1;
 }
 fadein(scol, fcol, 30, 30, "fadeinScheduler()");
 fadein_current++;
}

var fadein_loop     = false; //フェードイン処理のループ(永久に繰り返し) true | false
var fadein_url      = ""; //処理終了後別のURLに飛ばす場合
var fadein_current  = 0;
var fadein_setcolor = new Array();
//上から順番にフェードインしていく。白→黒→白→赤→白→青→白→緑
fadein_setcolor[0] = "#ffffff";
fadein_setcolor[1] = "#000000";
fadein_setcolor[2] = "#ffffff";
fadein_setcolor[3] = "#ff0000";
fadein_setcolor[4] = "#ffffff";
fadein_setcolor[5] = "#0000ff";
fadein_setcolor[6] = "#ffffff";
fadein_setcolor[7] = "#00ff00";

fadeinScheduler();

Browser:

Internet Explorer3.0以上
Netscape Navigator3.0以上
[ Back ]