画面が読み込まれた時に、フェードインして文字が表示されるスクリプトです。
Ver2では、あらかじめ指定した複数行が順番に表示されます。
より効果的に見せるならバックカラーは白か黒が良いでしょう。
２種類のサンプルがありますので、好みに応じてお使い下さい。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
フェードイン（白→黒バージョン）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
moji=new Array();
//フェードインさせたい文字を指定する
moji[0]="はじめのはじめのはじめのフェードイン";
moji[1]="2回目の2回目の2回目のフェードイン";
moji[2]="最後の最後の最後のフェードイン";
//フェードインさせたい文字を表示する横位置を指定する
x_iti=100;
//フェードインさせたい文字を表示する縦位置を指定する
y_iti=100;
//フェードインの早さを指定する
hayasa=100;
//次のフェードインに移るまでの秒数を指定する
hayasa2=3;
iro="0123456789abcdef";
j=15; a=0; mojis=moji[0];
function fade2()
{
iros2=iro.charAt(j);
if(document.layers){
document.layers["lay1"].moveTo(x_iti,y_iti);
document.layers["lay1"].document.open();
document.layers["lay1"].document.write('<font style="color:#'+iros2+iros2+iros2+iros2+iros2+iros2+';">'+mojis+'</font>');
document.layers["lay1"].document.close();
document.layers["lay1"].visibility='show'; }
else if((document.getElementById) && (!document.all)){
document.getElementById("lay1").style.top=x_iti;
document.getElementById("lay1").style.left=y_iti;
document.getElementById("lay1").innerHTML='<font style="color:#'+iros2+iros2+iros2+iros2+iros2+iros2+';">'+mojis+'</font>';
document.getElementById("lay1").style.visibility='visible'; }
else if(document.all){
document.all("lay1").style.pixelLeft=x_iti;
document.all("lay1").style.pixelTop=y_iti;
document.all("lay1").innerHTML='<font style="color:#'+iros2+iros2+iros2+iros2+iros2+iros2+';">'+mojis+'</font>';
document.all("lay1").style.visibility='visible'; }
if(j > 0)j--;
clearTimeout(a);
if(j > 0)a=setTimeout('fade2();',hayasa);
else
{
for(i=0; i<moji.length; i++)if(mojis == moji[i])break;
if(mojis == moji[i] && i<moji.length-1)
{ mojis=moji[i+1]; j=15; a=setTimeout('fade2();',hayasa2*1000); }
}
}
//-->
</script>
</head>
<body onLoad="fade2();" bgcolor="#ffffff"><br>
<span id="lay1" style="position:absolute;visibility:hidden;"></span>
</body></html>
[ 解説 ]
どちらのバージョンを使用する場合も、変更箇所は同じです。
まず各ソースの上から7〜9行目にある文字列を、お好きなように書き替えてください。
moji[0]="はじめのはじめのはじめのフェードイン";
moji[1]="2回目の2回目の2回目のフェードイン";
moji[2]="最後の最後の最後のフェードイン";
上から順に、1番目に表示される文字列、2番目に表示される文字列、
3番目に表示される文字列、となっています。
もし文字列を減らしたいならば、下から1行ずつ消してください。
例えばサンプルから1つ減らす場合は、以下のようになります。
| 変更前 |
|---|
moji[0]="はじめのはじめのはじめのフェードイン";
moji[1]="2回目の2回目の2回目のフェードイン";
moji[2]="最後の最後の最後のフェードイン";
|
| 変更後 |
|---|
moji[0]="はじめのはじめのはじめのフェードイン";
moji[1]="2回目の2回目の2回目のフェードイン";
|
反対に増やす場合は、一番下に追加していきます。
ただしこの時、必ず先頭にある数字部分を1つずつ増やしていきます。
サンプルの場合は、一番下の行の先頭の数字は「2」です。
ですからサンプルに1つデータを追加した場合は、追加したデータの先頭の数字は「3」になります。
実際にデータを1つ増やした場合どうなるのか、以下をご覧下さい。
| 変更前 |
|---|
moji[0]="はじめのはじめのはじめのフェードイン";
moji[1]="2回目の2回目の2回目のフェードイン";
moji[2]="最後の最後の最後のフェードイン";
|
| 変更後 |
|---|
moji[0]="はじめのはじめのはじめのフェードイン";
moji[1]="2回目の2回目の2回目のフェードイン";
moji[2]="最後の最後の最後のフェードイン";
moji[4]="追加の追加の追加ののフェードイン";
|
次に、1つのフェードインが終わって、次のフェードインに入るまでの「間」を設定します。
サンプルでは3秒に設定されていますが、使用する文字数が多い場合はより長めに、
少ないならもっと早くても良いでしょう。
変更する箇所は、上から11行目です。
hayasa=3;
の「3」の数字を変更します。
3秒なら3、1秒なら1、5秒なら5と指定してください。
文字が表示される位置を変更する場合は、上から13行目と14行目を変更します。
xs=19;
ys=20;
と言う部分がありますが、「19」が横位置、「20」が縦位置を表しています。
「19」、「20」の数値を変更すると、表示される位置も変わります。
確認しながら、位置は調節してください。
|
