Level3 2. フェードアウト

現在の画面を徐々に暗くしていきます。
これだけでは使えないので暗くしたら他のページへ飛ばしたりすることが多いです。

[実行結果]

[プログラム]

<script type="text/javascript" charset="Shift_JIS">

function Fadein1(r,g,b){
   for(i=0;i<256;i++){
      r--;   //赤を減らす
      g--;   //緑を減らす
      b--;   //青を減らす

      document.bgColor="rgb("+r+","+g+","+b+")";   //背景色を変化
   };
};

</script>

<form>
   <input type="button"value="実行" onClick="Fadein1(135,206,250)">　//実行
</form>

[解説]

この前のサンプルよりかなり単純になりました。

今回はフェードアウトです。つまり画面を徐々に暗くしていくわけです。暗くしていくには色の３つ、Red,Green,Blueの値を減らしていけばいいわけです。

JavaScript、HTML等での色の表し方には３通りあります。
#RRGGBB　00～FFの範囲（たいていの人はこの指定方法をしています)
rgb(RRR,GGG,BBB)　0～256の範囲（これで指定している人見たことありません)
ColorName　色の名前（ボクはこの指定方法です)
詳細はパスしますがR、G、Bが赤,緑,青の色の度合いを示しています。 R,G,Bの値が大きいと白に近くなり小さいと黒に近くなります。

このプログラムの流れは
1.R,G,Bの値をだんだん小さくしていく。
たったこれだけです。

function Fadein1(r,g,b)
さて、今回は関数を使うのですが()のなかになんか文字が入っています。これを引数といいます。

for(i=0;i<256;i++)
でループさせているわけです。この256というのは色の範囲が0～256なので256になっています。

r--; g--; b--;
で各色の数値を引いていっています。

document.bgColor="rgb("+r+","+g+","+b+")";
は背景色を出力しています。これで背景色が変化していっています。

この処理を繰り返して行うことで背景がだんだん暗くなっていきます。

document.bgColor: 背景色をかえる命令　 document.bgColor="red" とやると背景は赤色になります。

<input type="button"value="実行" onClick="Fadein1(135,206,250)">
これで関数を実行しています。
Fadein1(135,206,250)
の()のなかの数値は色の指定をしています、サンプルでは水色を指定しています。この数値の色から徐々に暗くなっていきます。

このフェードアウト、NN6、NN4.6だと動作が怪しいです。動くことは動くのですけどなんか変です、NN6ではXHTML宣言すると動きませんでした。

引数

引数とは関数に渡す値のことをいいます。

今回はFadein1(135,206,250)で数値を渡しています。この数値がfunction Fadein1(r,g,b)のr,g,bに代入されるわけです。この数値が関数内で使われます。

ただこれだけですがなかなか使いますので覚えておくといいでしょう。

おまけ＆活用方法

#RRGGBB 形式へ変換

まずこのサンプルでは rgb(RRR,GGG,BBB) 形式で色指定をしなければならないので #RRGGBB 形式に変換します。といってもたいしたことはしません、 Fadein1(RRR,GGG,BBB)の部分をFadein1(0xRR,0xGG,0xBB)としてやるだけです。

つまり#AA00FFという色の場合はFadein1(0xAA,0x00,0xFF)としてやればOKです。

この 0x というのはこの数値が１６進数だということをあらわしています。

別ページへ飛ばす

とりあえずサンプルページにいってみて試してください。
よかったら下のソースを使ってください。

<script type="text/javascript" charset="Shift_JIS">
function Fadein1(r,g,b){
   for(i=0;i<256;i++){
      r--;
      g--;
      b--;
      document.bgColor="rgb("+r+","+g+","+b+")";
   };
   location.href="****.html"　//リンク先のアドレス
};
</script>

<a href="javascript:Fadein1(135,206,250)">リンク先</a>

注意なんですがスタイルシートで背景色を設定している場合には無効です。

フェードインする(画面を徐々に明るくしていく)

r--; g--; b--;
の部分を
r++; g++; b++;
としてください。

２. フェードアウト