ホームページ作成ガイド

文字のフェードイン

<html>
<head>
<title>文字のフェードイン</title>

<script LANGUAGE="JavaScript">

</script>

/** 文字のスタイル **/
<style type="text/css">
.text { font-weight:bold;
font-size:18px;
}
</style>

</head>

<body bgcolor="#ffffff" onLoad="init()">

<br>
以下にテキストがフェードインしてきます<br>
<br>
<div id="text1" style="position:absolute;color:#ffffff"></div><br>
<br>
<div id="text2" style="position:absolute;color:#ffffff"></div><br>
<br>
<div id="text3" style="position:absolute;color:#ffffff"></div><br>
</body>
</html>

※文字をフェードインさせます。時間差をおいて複数行表示させています。
背景と同じ色（白=#ffffff）から最終的に表示する色（青=#0000ff"）まで、
一定時間毎に色を変更して表示することでフェードインと同じ効果を実現しています。

フェードインする文字の領域を<BODY>部に記述します。
<div id="text1" style="position:absolute;color:#ffffff"></div>

id を「text1」から連番で指定します。この連番は表示される順と同じです。
文字はいくつでも指定できます。
文字はフェードイン処理と一緒に書き出すので、ここでは文字を記述しません。
color は背景と同じ色を指定しておいてください。

<head>～</head>内のJavaScriptに、以下を設定します。

var cols = "fedcba9876543210";

フェードインしていく色の変化を文字列にしたものです。
白（#ffffff）から青（#0000ff）まで変化していくので、
#ffffff のうちの前4桁部分のf～0までを文字列にしています。

var count = new Array(0,0,0);

フェードイン処理用カウンタです。
上記の例では文字を3つ使用しますので、初期値 0 を
3つ設定しています。

var str = new Array("<span class='text'>お待たせしました！</span>",
"<span class='text'>新バージョンが登場です！</span>",
"<span class='text'>さらに便利にお求め安くなりました！</span>");

文字を配列 str に設定しています。","で区切っていくつでも追加できます。
表示される順にセットしていきます。
<span class='text'>は文字に適用されるスタイルシートです。

ページが読み込まれたら（=onLoad）初期処理 init() を実行します。

function init(){
for (i=0;i<str.length; i++){
文字の数だけ以下を実行します。

/* IE6 & NN6 */
if (document.getElementById) document.getElementById("text"+(i+1)).innerHTML = str[i];

/* IE */
else if (document.all) document.all("text"+(i+1)).innerHTML = str[i];

/* NN4 */
else if (document.layers){
document.layers["text"+(i+1)].document.open();
document.layers["text"+(i+1)].document.fgColor = "#ffffff";
document.layers["text"+(i+1)].document.write(str[i]);
document.layers["text"+(i+1)].document.close();
}

text1から順に文字をセットしていきます。
ブラウザによって、セットする処理が異なるので、上記のように
3パターン記述します。

}

Fadein(0); // 最初の文字のフェードイン処理を実行します。
setTimeout("Fadein(1)",1500); //　2番目の文字のフェードイン処理を1.5秒後に実行します。
setTimeout("Fadein(2)",3000); //　3番目の文字のフェードイン処理を3秒後に実行します。

関数Fadeinの引数には、文字の配列番号（=text1～の連番から1を引いた数）を渡します。
}

フェードイン処理関数を記述します。

function Fadein(j){
c = cols.charAt(count[j]++); // 次の色のコードを取得

次の色の前4桁部分を取得します。

col = "#"+c+c+c+c+"ff"; // 次の色をセット

if (document.getElementById) document.getElementById("text"+(j+1)).style.color = col;
else if (document.all) document.all("text"+(j+1)).style.color = col;
else if (document.layers){
document.layers["text"+(j+1)].document.open();
document.layers["text"+(j+1)].document.fgColor = col;
document.layers["text"+(j+1)].document.write(str[j]);
document.layers["text"+(j+1)].document.close();
}

文字に色を適用します。
NN4（if (document.layers)以下）では毎回文字ごと書き出す必要があります。

if (count[j] < cols.length) setTimeout("Fadein("+j+")",200); // 0.2秒毎に実行

最後の色で表示されるまで、0.2秒毎にこの関数を実行します。
setTimeout()の引数 200 は200ミリ秒後を表します。
この数値を変えると、フェードインの速度を速くしたり遅くしたりできます。

}