WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - フェード
   - フェードインして出てくる文字列

画面が読み込まれた時に、フェードインして文字が表示されるスクリプトです。
より効果的に見せるならバックカラーは白か黒が良いでしょう。
2種類のサンプルがありますので、好みに応じてお使い下さい。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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="フェードインして出てくるよ。";

	//フェードインさせたい文字を表示する横位置を指定する
	x_iti=100;
	//フェードインさせたい文字を表示する縦位置を指定する
	y_iti=100;

	//フェードインの早さを指定する
	hayasa=100;


	iro="0123456789abcdef";
	i=0;  j=15;  a=0;  b=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+';">'+moji+'</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+';">'+moji+'</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+';">'+moji+'</font>';
		document.all("lay1").style.visibility='visible';  }
		if(j > 0)j--;
		clearTimeout(b);
		if(j > 0)b=setTimeout('fade2();',hayasa);
		}

//-->
</script>

</head>

<body onLoad="fade2();" bgcolor="#ffffff"><br>

<span id="lay1" style="position:absolute;visibility:hidden;"></span>

</body></html>


[ 解説 ]

どちらのバージョンを使用する場合も、変更箇所は同じです。
まず各ソースの上から6行目にある「フェードインして出てくるよ。」と書かれた部分に、 お好きな文字を書いてください。

文字が表示される位置を変更する場合は、上から8行目と9行目を変更します。
xs=19;
ys=20;
と言う部分がありますが、「19」が横位置、「20」が縦位置を表しています。

「19」、「20」の数値を変更すると、表示される位置も変わります。
確認しながら、位置は調節してください。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.