SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マルチレイヤー（テキストに影）]

マルチレイヤー（テキストに影）

機能

複数のテキストを一定の規則で動作させ、最終的にあるテキストに対して影が付くようにしたスクリプトです。オープニングなどに最適な演出方法で、影の幅や、投影速度などの設定が可能です。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iLxを指定します。この時、DIV要素（レイヤー）は使用するテキスト分だけ必要です。具体的には、基準となるテキストを「iL0」とし、それ以外に影を付けるテキスト分を加えます。また、iLxのxの部分は0から順に連番で付ける必要があります（ここでは０～４）。

改造方法

影の個数やその速度、位置関係などを変更可能です。

スタイル(Style1): CSSリファレンスに従って、変更可。
テキストカラー: IDセレクタの #iL0 , #iL1 , ・・・のcolorプロパティの値を指定します。カラーネームは極力避け、RGB値による指定をお奨めします。
レイヤー数の変更: Laymaxに変更後のレイヤー数を指定します。ただし、影の個数分を指定します。（ここでは４）と同時に、DIV要素を追加、削除し数を合わせます。この時、ID属性値はiLxの「x」の数値に注意して下さい。また、「iL0」は必須で、これを基準に影となるレイヤーを描画します。
投影速度: actTを小さくすれば速く、大きくすれば遅くなります。他にもDcountの数値を大きくすることで投影速度を遅くすることもできます。また、この数値を大きくするほど（条件によりますが）動きが滑らかになります。
投影位置: Dx , DyがそれぞれＸ，Ｙ方向の影の位置を示し、それぞれその前のレイヤーに対するずれ量となります。大きくするほど、影は大きくずれます。単位はピクセルです。
表示開始位置: X , Yがそれぞれ初期レイヤーの表示位置を示します。任意に設定可能です。

対応ブラウザ

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:		24pt;
	font-weight:		bold;
	visibility:		hidden;
}
#iL0{color:#0000ff}
#iL1{color:#aaaaaa}
#iL2{color:#cccccc}
#iL3{color:#dddddd}
#iL4{color:#eeeeee}
-->
</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 = 4;	//レイヤーの最大数（影）
var actT = 16;	//移動時間：速＝小

var Dx = 10;		//影のX方向の幅
var Dy = 5;		//影のY方向の幅
var Dcount = 5;	//投影速度
var X = 100;		//レイヤー左位置
var Y = 50;		//レイヤー上位置

var Fflag = new Array();
var Ftflag = false;
var lay = new Array();;
var Count = 0;
var Lcount = 1;

function Init(){
	var i;
	for(i = 0; i <= Laymax; i++){
		if(iIE4){
			lay[i] = document.all("iL"+i);
			lay[i].style.visibility = "hidden";
			lay[i].style.zIndex = Laymax - i;
		}
		if(iNN4){
			lay[i] = document.layers["iL"+i];
			lay[i].visibility = "hide";
			lay[i].zIndex = Laymax - i;
		}
	}
	SetXY(0);
	SetXY(1);
	multiLay();
}

function multiLay(){
	var Xc,Yc;
	var TimeID;
	if(Count <= Dcount){
		Count++;
		Xc = X + Math.round(Dx/Dcount * Count);
		Yc = Y + Math.round(Dy/Dcount * Count);
		if(iIE4){
			lay[Lcount].style.posLeft = Xc;
			lay[Lcount].style.posTop = Yc;
		}
		if(iNN4){
			lay[Lcount].moveTo(Xc,Yc);
		}
		TimerID = setTimeout("multiLay()",actT);
	}else{
		if(Lcount < Laymax){
			Count = 0;
			Lcount++;
			SetXY(Lcount);
			TimerID = setTimeout("multiLay()",actT);
		}else{
			clearTimeout(TimeID);
		}
	}
}

function SetXY(kkk){
	if(iIE4){
		if(kkk != 0){
			X = lay[kkk-1].style.posLeft;
			Y = lay[kkk-1].style.posTop;
		}
		lay[kkk].style.posLeft = X;
		lay[kkk].style.posTop = Y;
		lay[kkk].style.visibility = "visible";
	}
	if(iNN4){
		if(kkk != 0){
			X = lay[kkk-1].left;
			Y = lay[kkk-1].top;
		}
		lay[kkk].left = X;
		lay[kkk].top = Y;
		lay[kkk].visibility = "show";
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV CLASS="Style1" ID="iL0">JavaScript・DynamicHTML Samples</DIV>
<DIV CLASS="Style1" ID="iL1">JavaScript・DynamicHTML Samples</DIV>
<DIV CLASS="Style1" ID="iL2">JavaScript・DynamicHTML Samples</DIV>
<DIV CLASS="Style1" ID="iL3">JavaScript・DynamicHTML Samples</DIV>
<DIV CLASS="Style1" ID="iL4">JavaScript・DynamicHTML Samples</DIV>

</BODY>
</HTML>

[Go To Top]