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

Dynamic HTMLの参考書 Java Scriptの参考書

フェードイン

機能

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

類似サンプル

  1. フェードアウト
  2. フェードイン&アウト
  3. エンディング!?
  4. エンディング!?:2

利用方法

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

改造方法

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

スタイル(Style1)
CSSリファレンスに従って、変更可。
テキストカラー
変数ColorFに代入される文字列がカラーコードを示しています(ColorF = z+z+z+z+z+z;)。 変数に代入される文字列は、ColorPLTから1文字ずつ抜き取り生成するもので、0〜9 , a〜fで構成されています。 この色を変更するには、例えば以下のようにしますが、当スクリプトでは実現できる色は限られてきます。 ソースから改造すれば可能ですが、各自で行って下さい。(かなり面倒?)
レイヤー数の変更
Laymaxに変更後のレイヤー数を指定します。(ここでは5) と同時に、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 = "fedcba9876543210";
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].style.visibility = "visible";
		}
		if(iNN4){
			lay[i] = document.layers["iL"+i];
			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]

Last modified Nov,2000
Copyright(C)1999 T.Miyazaki , All Rights Reserved.