ページに関するTips

フェードイン／アウト

フェードイン／アウトはページが表示される前(フェードイン) 又は別のページに移るとき(フェードアウト) 時に背景色を変えて同様の効果を挙げるもので、最も一般的なテクニックの１つです。

フェードイン／アウトの実行部分は以下の通りです。

<script language="JavaScript"><!--
cvtable='0123456789ABCDEF';
// 10進数を16進数に変換する関数
function ToHexa(n){
  if(n<=0)        return '00';
  else if(n>=255) return 'ff';
  return cvtable.charAt(Math.floor(n/16))+
         cvtable.charAt(n%16);
}
// 背景色を変更する関数
function SetBgColor(r,g,b){
  document.bgColor='#'+ToHexa(r)+ToHexa(g)+ToHexa(b);
}
function Fade(step,sr,sg,sb,er,eg,eb){
              // step:     階調,
              // sr,sg,sb: 最初の色(RGB値)
              // er,eg,eb: 最後の色(RGB値)
  for(var i=0;i<=step;i++){
    SetBgColor(
      Math.floor(sr+(er-sr)*(i/step)),
      Math.floor(sg+(eg-sg)*(i/step)),
      Math.floor(sb+(eb-sb)*(i/step))
    );
  }
}
// --></script>

但し、このスクリプトは NN6 では効果がありません。

これは、NN6 の描画がブラウザに制御が渡ってから実行されるためで ( IE4 の初期のころもこのような動作でした ^^; )、もし、NN6 でも同様な効果を演出したい場合は、for ループせずに setTimeout で行います。

<script language="JavaScript"><!--
cvtable='0123456789ABCDEF';
// 10進数を16進数に変換する関数
function ToHexa(n){
  if(n<=0)        return '00';
  else if(n>=255) return 'ff';
  return cvtable.charAt(Math.floor(n/16))+
         cvtable.charAt(n%16);
}
// 背景色を変更する関数
function SetBgColor(r,g,b){
  document.bgColor='#'+ToHexa(r)+ToHexa(g)+ToHexa(b);
}

tid  =null; interval=50;
cStep=0;    nStep   =0;
sr=0; sg=0; sb=0; er=0; eg=0; eb=0;
// フェード関数
function startFade(step,r0,g0,b0,r1,g1,b1){
              // step:     階調,
              // r0,g0,b0: 最初の色(RGB値)
              // r1,g1,b1: 最後の色(RGB値)
  if(tid==null){
    cStep=0; nStep=step;
    sr=r0; sg=g0; sb=b0; er=r1; eg=g1; eb=b1;
    doFade();
  }
}
// フェード実行関数
function doFade(){
  if(cStep++<nStep){
    SetBgColor(
      Math.floor(sr+(er-sr)*(cStep/nStep)),
      Math.floor(sg+(eg-sg)*(cStep/nStep)),
      Math.floor(sb+(eb-sb)*(cStep/nStep))
    );
    tid=setTimeout('doFade()',interval);
  } else tid=null;
}
// --></script>

setTimeoutを使用する方法は、当然ですが、onUnloadイベントでは使用できません。f(^^;

使用例

上記の Fade関数を好きな場所で使用すれば、フェードイン／アウトが実現できます。

例えば、表示時にグレイから黄色にフェードインし、他のページに行く時は逆にフェードアウトする場合は以下のように記述します。

<body bgColor="#808080" ...
      onUnload="Fade(16,0xe0,0xff,0xff,0x80,0x80,0x80);">
      :
<script language="JavaScript"><!--
Fade(16,0x80,0x80,0x80,0xff,0xff,0xe0);
      // または
startFade(16,0x80,0x80,0x80,0xff,0xff,0xe0);
// --></script>

例

注意事項

フェードインを実行する場所は以下の３個所が考えられます。

<head> タグの中
<body> タグの onLoad イベント
<body> タグの中

フェードアウトを実行する場所は <body> タグの onUnload イベントです。 <body> タグの onLoad イベントで使用すると全ての文字やイメージが表示された後実行されるので画像がちらつきます。同様の理由でフェードアウトしても画像がちらつきます。これらの場所で使用する場合は階調( step )を少なくすべきでしょう。

Fade()関数の初期値を document.bgColor の値で自動設定すると、より汎用的な関数になります。

<body> タグで透明な部分をもつGIFファイルを background として指定した場合、壁紙の画像を表示した後ではフェードイン／アウト効果はありません。壁紙を併用する場合にはフェードインのみ( onLoad イベントは除く )しか役に立ちません。

透明な部分をもつGIFファイルを壁紙に指定した場合、イメージの透明部分の色は初期の（BODYタグで指定した）色のままで document.bgColor を変更しても変化しません。透明化GIFを壁紙に指定した例はこちら。

フレーム構成のページに onUnloadイベントで FadeOut を指定した場合、フレーム自体( 要は親ドキュメントです )の「戻る」操作をした場合は onUnloadイベントが呼出されません。

Mozilla(NN6)は描画方式が異なるのでエラーは出ませんが、思うような動作もしません。
Mozilla で動作させるには setTimeout 方式の startFade 関数を使用する必要があります。
また、 setTimeout 方式の関数は onUnload イベントで呼び出しても意味がないので注意して下さい。

<head> タグ中でフェードインを使用するとフェードイン処理の後、 <body> タグの bgcolor の色で再設定されるバージョンが存在します。