画面が読み込まれた時に、文字列が縦にスクロールして表示されるスクリプトです。
文字列は、だんだんとサイズが大きくなって色も濃くなって表示されます。
消えていく時は、サイズがまた小さくなって色が薄くなって消えていきます。
映画などで流れるスタッフロールのような感じです。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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();
//開始時の文字色（一番薄い色）
start_color="d8c3af";
//終了時の文字色（一番濃い色）
end_color="5b4129";
//開始時の文字サイズ（一番小さいサイズ）
start_size=10;
//文字サイズの変更度合い（指定したサイズ分で、大きくなったり小さくなったりします）
size_plus=4;
//表示する文字列
moji[0]="ずいずいずっころばし ごまみそずい";
moji[1]="茶壺にはまって どっぴんしゃん";
moji[2]="抜けたら どんどこしょ";
moji[3]="俵のねずみが 米食ってちゅー";
moji[4]="ちゅーちゅーちゅー";
moji[5]="おとさんが呼んでも おかさんが呼んでも";
moji[6]="行きっこなぁしよ";
moji[7]="井戸の周りでお茶碗かいたの だぁれ";
//表示する桁数
y_kazu=9;
//スクロール速度
times=500;
//表示する領域の横幅
my_width=300;
//センター表示チェック。1ならセンター表示、0なら指定位置優先
cen_han=1;
//表示位置
x_iti=300;
y_iti=50;
//その他、色やサイズ以外に加えたいタグ
tagu1='';
tagu2='';
y_max=Math.ceil(y_kazu/3);
iro="0123456789abcdef";
haji1=eval("0x"+start_color.substring(0,2));
haji2=eval("0x"+start_color.substring(2,4));
haji3=eval("0x"+start_color.substring(4,6));
haji11=eval("0x"+end_color.substring(0,2));
haji22=eval("0x"+end_color.substring(2,4));
haji33=eval("0x"+end_color.substring(4,6));
if(start_color<end_color)
{
kazu1=Math.ceil((haji11-haji1)/y_max);
kazu2=Math.ceil((haji22-haji2)/y_max);
kazu3=Math.ceil((haji33-haji3)/y_max);
}
else
{
kazu1=-Math.ceil((haji1-haji11)/y_max);
kazu2=-Math.ceil((haji2-haji22)/y_max);
kazu3=-Math.ceil((haji3-haji33)/y_max);
}
haji_taihi1=haji1;
haji_taihi2=haji2;
haji_taihi3=haji3;
colors=new Array();
my_size=new Array();
for(i=0; i<y_kazu; i++)
{
if(i == 0){ colors[i]=start_color; my_size[i]=start_size; }
else if(i < y_max)
{
haji_taihi1+=kazu1;
haji_taihi2+=kazu2;
haji_taihi3+=kazu3;
colors[i]=haji_taihi1.toString(16)+haji_taihi2.toString(16)+haji_taihi3.toString(16);
my_size[i]=my_size[i-1]+size_plus;
}
else if(i < y_max*2) { colors[i]=end_color; my_size[i]=my_size[i-1]; }
else { colors[i]=colors[y_kazu-i-1]; my_size[i]=my_size[y_kazu-i-1]; }
}
my_time=0; j=0; hajime=0;
mojis="";
function fade2()
{
if(cen_han == 1)
{
if((document.layers) || ((document.getElementById) && (!document.all)))
{
x_iti=(outerWidth-my_width)/2;
y_iti=outerHeight/3;
}
else
{
x_iti=(document.body.clientWidth-my_width)/2;
y_iti=document.body.clientHeight/3;
}
}
if(hajime < y_kazu)
{
doko=y_kazu-1;
for(i=0; i<y_kazu-hajime; i++){ mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';"> </font><br>'; doko--; }
for(i=0; i<hajime; i++)
{
mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';">'+moji[i]+'</font><br>';
doko--;
if(doko < 0)doko=y_kazu-1;
}
}
else
{
doko=y_kazu-1;
for(i=j; i<j+y_kazu; i++)
{
if(i < moji.length)
mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';">'+moji[i]+'</font><br>';
else mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';"> </font><br>';
doko--;
if(doko < 0)doko=y_kazu-1;
}
}
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(tagu1+mojis+tagu2);
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=tagu1+mojis+tagu2;
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=tagu1+mojis+tagu2;
document.all("lay1").style.visibility='visible'; }
hajime=(hajime < moji.length+y_kazu-1)?hajime+1:0;
if(hajime == y_kazu)j=1;
else if(hajime > y_kazu)j++;
mojis="";
clearTimeout(my_time);
my_time=setTimeout('fade2()',times);
}
//-->
</script>
</head>
<body onLoad="fade2();" bgcolor="#ffffff"><br>
<span id="lay1" style="position:absolute;visibility:hidden;"></span>
</body></html>
[ 解説 ]
変更可能箇所は、ソース内に注意書きがついていますので、そちらをご覧下さい。
「開始時の文字色」と「終了時の文字色」を指定すると、それ以外の色は自動的に判別して色を区分けします。
この時、必ず色はRGB指定して下さい。
色名での指定は出来ません。
文字サイズも同じく、自動的にサイズが変動します。
しかし、文字サイズの場合は、サイズ変更の度合いを指定できます。
「size_plus=4;」の場合は、文字サイズが4ずつ大きくなったり小さくなったりします。
「表示する文字列」の以下にある文字列部分を書き換えると、表示される文字列が変わります。
サンプルで使用している文字列は、全部で8行有ります。
moji[0]="ずいずいずっころばし ごまみそずい";
が1行目、
moji[1]="茶壺にはまって どっぴんしゃん";
が2行目の文字列です。
サンプルでは8個の文章がありますが、もし使用する文字列が8行未満の場合は不要な行を下から削除して下さい。
例えば、実際に使用する文字列は4行だけで、不要な4行を削除する場合は以下のようになります。
| 変更前 | 変更後 |
|---|
moji=new Array();
moji[0]="ずいずいずっころばし ごまみそずい";
moji[1]="茶壺にはまって どっぴんしゃん";
moji[2]="抜けたら どんどこしょ";
moji[3]="俵のねずみが 米食ってちゅー";
moji[4]="ちゅーちゅーちゅー";
moji[5]="おとさんが呼んでも おかさんが呼んでも";
moji[6]="行きっこなぁしよ";
moji[7]="井戸の周りでお茶碗かいたの だぁれ";
|
moji=new Array();
moji[0]="かごめかごめ 籠の中の鳥は";
moji[1]="いついつ出やる";
moji[2]="夜明けの晩に 鶴と亀が滑った";
moji[3]="後ろの正面だぁれ";
|
反対に、8行以上に増やしたい場合は、必要なだけ行を増やしていきます。
増やした行は、先頭に付いている数字を変更しなければなりません。
見ていただければおわかりの通り、先頭に付いている数字は、
上から順に0,1,2,3,……・と、1つずつ大きくなっています。
同じように、増やした行も適切に数値を書き換えて下さい。
例えば、サンプルの8行を1行増やす場合は、以下のようになります。
| 変更前 | 変更後 |
|---|
moji=new Array();
moji[0]="ずいずいずっころばし ごまみそずい";
moji[1]="茶壺にはまって どっぴんしゃん";
moji[2]="抜けたら どんどこしょ";
moji[3]="俵のねずみが 米食ってちゅー";
moji[4]="ちゅーちゅーちゅー";
moji[5]="おとさんが呼んでも おかさんが呼んでも";
moji[6]="行きっこなぁしよ";
moji[7]="井戸の周りでお茶碗かいたの だぁれ";
|
moji=new Array();
moji[0]="とおりゃんせ とおりゃんせ";
moji[1]="ここはどこの細道じゃ";
moji[2]="天神様の細道じゃ";
moji[3]="ちょっと通してくだしゃんせ";
moji[4]="ご用のないもの通しゃせぬ";
moji[5]="この子の7つのお祝いに";
moji[6]="お札を収めに参ります";
moji[7]="行きは良い良い 帰りは怖い";
moji[8]="怖いながらも とおりゃんせとおりゃんせ";
|
「表示する桁数」、「スクロール速度」、「表示する領域の横幅」は、
お好きな数字を指定して下さい。
ただし、「スクロール速度」は必ず「50」以上の値を指定して下さい。
短すぎると速度が速すぎるだけでなく、エラーを引き起こすかも知れません。
「センター表示チェック」は、1を指定すると自動的に真ん中表示になります。
0が指定されている場合は、「表示位置」の「x_iti」を横位置として「y_iti」を縦位置として表示します。
|
