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

マルチレイヤー（テキスト集結）

機能

複数のテキストを一定の規則で動作させ、最終的に１カ所へ集結させるスクリプトです。オープニングなどに最適な演出方法で、動作速度や表示開始位置などの設定が可能です。

利用方法

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

改造方法

スクロールするテキストの速さ、位置とスタイルを変更可能です。

スタイル(Style1): CSSリファレンスに従って、変更可。
テキストカラー: IDセレクタの #iL1 , #iL2 , ・・・のcolorプロパティの値を指定します。カラーネームは極力避け、RGB値による指定をお奨めします。
レイヤー数の変更: Laymaxに変更後のレイヤー数を指定します。（ここでは４）と同時に、DIV要素を追加、削除し数を合わせます。この時、ID属性値はiLxの「x」の数値に注意して下さい。
移動速度: actTを小さくすれば速く、大きくすれば遅くなります。また、それぞれのレイヤーごとに移動時間の設定が可能で、Fcount[x]にその数値を指定します。この数値は大きいほど長い時間をかけて移動し、遅くなります。
表示開始位置: Srandomに「true」を指定すれば、開始位置はランダムに決定します。逆に「false」を指定すれば、Sposi[x]に指定した座標から開始します。この時、[x]の配列番号に対応するレイヤーはサンプルのコメントを参照して下さい。それぞれ、ｘ，ｙ座標をそれぞれ指定する必要があります。
最終到達位置: 表示開始位置同様、Fposi[x]に指定した座標から開始します。この時、[x]の配列番号に対応するレイヤーはサンプルのコメントを参照して下さい。それぞれ、ｘ，ｙ座標をそれぞれ指定する必要があります。

対応ブラウザ

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:		16pt;
	font-weight:		bold;
	width:			400px;
	visibility:		hidden;
}
#iL1{color:#aaaaff}
#iL2{color:#8888ff}
#iL3{color:#4444ff}
#iL4{color:#0000ff}
-->
</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 = 5;		//移動時間：速＝小

var Srandom = true;		//スタート地点の座標の決め方:true=random,flase=value
var Sposi = new Array();	//スタート地点の座標
Sposi[1] = 0;		//iL1:X
Sposi[2] = 0;		//iL1:Y
Sposi[3] = 0;		//iL2:X
Sposi[4] = 0;		//iL2:Y
Sposi[5] = 0;		//iL3:X
Sposi[6] = 0;		//iL3:Y
Sposi[7] = 0;		//iL4:X
Sposi[8] = 0;		//iL4:Y

var Fposi = new Array();	//最終到達座標：Laymax*2個分のx,y座標
Fposi[1] = 200;	//iL1:X
Fposi[2] = 200;	//iL1:Y
Fposi[3] = 210;	//iL2:X
Fposi[4] = 210;	//iL2:Y
Fposi[5] = 220;	//iL3:X
Fposi[6] = 220;	//iL3:Y
Fposi[7] = 230;	//iL4:X
Fposi[8] = 230;	//iL4:Y

var Fcount = new Array();	//移動完了までのカウント数
Fcount[1] = 100;	//iL1
Fcount[2] = 100;	//iL2
Fcount[3] = 100;	//iL3
Fcount[4] = 100;	//iL4

var Fflag = new Array();
var Ftflag = false;
var lay;
var leftX,topY;
var Count = 0;

function Init(){
	var scrX,scrY,i;
	for(i = 1; i <= Laymax; i++){
		Fflag[i] = false;
	}
	if(iIE4){
		scrX = document.body.clientWidth;
		scrY = document.body.clientHeight;
	}
	if(iNN4){
		scrX = innerWidth;
		scrY = innerHeight;
	}
	for(i = 1; i <= Laymax; i++){
		if(Srandom){
			if(iIE4){
				lay = document.all("iL"+i);
				leftX = Math.round(Math.random()*scrX - lay.style.posWidth);
				topY = Math.round(Math.random()*scrY - lay.style.posHeight);
			}
			if(iNN4){
				lay = document.layers["iL"+i];
				leftX = Math.round(Math.random()*scrX - lay.clip.width);
				topY = Math.round(Math.random()*scrY - lay.clip.height);
			}
			if(leftX <= 0){
				Sposi[i*2-1] = 1;
			}else{
				Sposi[i*2-1] = leftX;
			}
			if(topY <= 0){
				Sposi[i*2]=1;
			}else{
				Sposi[i*2] = topY;
			}
			if(iIE4){
				lay.style.visibility = "visible";
			}
			if(iNN4){
				lay.visibility = "show";
			}
		}
	}
	multiLay();
}

function multiLay(){
	var Xc,Yc;
	var TimeID;
	Count++;
	if(!Ftflag){
		Ftflag = true;
		for(i = 1; i <= Laymax; i++){
			if(Fflag[i] || Fcount[i] == 0){
				Xc = Fposi[i*2-1];
				Yc = Fposi[i*2];
			}else{
				Xc = Math.round(Sposi[i*2-1] + (Fposi[i*2-1] - Sposi[i*2-1])/Fcount[i] * Count);
				Yc = Math.round(Sposi[i*2] + (Fposi[i*2] - Sposi[i*2])/Fcount[i] * Count);
			}
			if(iIE4){
				lay = document.all("iL"+i);
				lay.style.posLeft = Xc;
				lay.style.posTop = Yc;
			}
			if(iNN4){
				lay = document.layers["iL"+i];
				lay.moveTo(Xc,Yc);
			}
			if(Count >= Fcount[i]){
				Fflag[i] = true;
			}else{
				Ftflag = false;
			}
		}
	}
	if(Ftflag){
		clearTimeout(TimeID);
	}else{
		TimerID = setTimeout("multiLay()",actT);
	}
}
// -->
</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>

</BODY>
</HTML>

[Go To Top]