SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [フェードアウト]

フェードアウト

機能

テキストをフェードアウトさせます。サイトの各部の演出に最適な手法です。フェード速度やその箇所の設定などが自由に可能です。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iLxを指定します。この時、DIV要素（レイヤー）は使用するテキスト分だけ必要です。また、iLxのxの部分は1から順に連番で付ける必要があります（ここでは１～５）。

類似サンプル

改造方法

フェードするテキストのフェード速度、色、テキスト内容を変更可能です。

スタイル(Style1)

CSSリファレンスに従って、変更可。

テキストカラー

変数ColorFに代入される文字列がカラーコードを示しています（ColorF = z+z+z+z+z+z;）。変数に代入される文字列は、ColorPLTから１文字ずつ抜き取り生成するもので、0～9 , a～fで構成されています。この色を変更するには、例えば以下のようにしますが、当スクリプトでは実現できる色は限られてきます。ソースから改造すれば可能ですが、各自で行って下さい。（かなり面倒？）

赤：ColorF = "ff"+z+z+z+z;
緑：ColorF = z+z+"ff"+z+z;
青：ColorF = z+z+z+z+"ff";

レイヤー数の変更

Laymaxに変更後のレイヤー数を指定します。（ここでは５）と同時に、DIV要素を追加、削除し数を合わせます。この時、ID属性値はiLxの「x」の数値に注意して下さい。

フェード速度

actTを小さくすれば速く、大きくすれば遅くなります。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>フェードアウト</TITLE>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:		absolute;
	font-size:		32pt;
	font-weight:		bold;
}
#iL1{top:50;left:100;}
#iL2{top:100;left:120;}
#iL3{top:150;left:120;}
#iL4{top:200;left:120;}
#iL5{top:250;left:120;}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 5;	//レイヤーの最大数
var actT = 100;	//移動時間：速＝小

var Comments = new Array();
Comments[1] = "<DIV CLASS='Style1'>初めてのホームページ講座<\/DIV>";
Comments[2] = "<DIV CLASS='Style1'>Dynamic HTMLによる<\/DIV>";
Comments[3] = "<DIV CLASS='Style1'>フェードアウト！<\/DIV>";
Comments[4] = "<DIV CLASS='Style1'>フェード速度やフォントを<\/DIV>";
Comments[5] = "<DIV CLASS='Style1'>自由に設定できます。<\/DIV>";

var lay = new Array();
ColorPLT = "0123456789abcdef";
var Count = 0;
var Com = 1;
var ColorF;

function Init(){
	for(i = 1; i <= Laymax; i++){
		if(iIE4){
			lay[i] = document.all("iL"+i);
			lay[i].innerHTML = Comments[i];
			lay[i].style.visibility = "visible";
		}
		if(iNN4){
			lay[i] = document.layers["iL"+i];
			lay[i].document.open();
			lay[i].document.write(Comments[i]);
			lay[i].document.close();
			lay[i].visibility = "show";
		}
	}
	FadeIn();
}

function FadeIn(){
	if(Com <= Laymax){
		if(Count < ColorPLT.length){
			z = ColorPLT.charAt(Count);
			ColorF = z+z+z+z+z+z;
			SetColor(Com);
			Count++;
			setTimeout("FadeIn()",actT);
		}else{
			Com++;
			Count = 0;
			setTimeout("FadeIn()",actT);
		}
	}
}

function SetColor(kkk){
	if(iIE4){
		lay[kkk].style.color = ColorF;
		lay[kkk].innerHTML = Comments[kkk];
	}
	if(iNN4){
		lay[kkk].document.open();
		lay[kkk].document.fgColor = ColorF;
		lay[kkk].document.write(Comments[kkk]);
		lay[kkk].document.close();
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV CLASS="Style1" ID="iL1"></DIV>
<DIV CLASS="Style1" ID="iL2"></DIV>
<DIV CLASS="Style1" ID="iL3"></DIV>
<DIV CLASS="Style1" ID="iL4"></DIV>
<DIV CLASS="Style1" ID="iL5"></DIV>

</BODY>
</HTML>

[Go To Top]