SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [エンディング！？：２]
Dynamic HTMLの参考書 Java Scriptの参考書

エンディング！？：２

機能

映画でよく見るエンディングの演出のようなダイナミックHTMLです。 テキストがフェードインしながら下からスクロールアップし、上の方でフェードアウトするスクリプトです。 Web演出用にもってこいです。

「エンディング？！」のマイナーバージョンアップ版でスクロールスピードやフェードスピードが自由に設定できます。

無限にループする機能を設けるため、以前の公開版に対して処理方法を若干変更しました。 スクリプトの改造が若干楽になっています。(2000.3)

類似サンプル

  1. フェードイン
  2. フェードアウト
  3. フェードイン＆アウト
  4. エンディング！？

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iL1,iL2・・・（テキスト分）を指定します。

改造方法

表示するテキスト、そのスタイル、スクロール速度、フェード位置などが変更可能です。

スタイル(Style1)
CSSリファレンスに従って、変更可。
速度
スクロール、フェード速度を変更可能です。 ActSpeedは1/1000secで割り込みしますが、この割り込み時間に対する下記の変数倍での速度を指定します。
ScrSpeed
スクロール速度。上下にスクロールするテキストの速度。
FadeSpeed
フェード速度。フェードイン、アウトする速度。
Mugen
無限ループ機能。「true」のとき無限にループを繰り返し、「false」のとき１回限りで処理を終了します。
レイヤー（字幕）数
Laymaxを表示するテキスト数に変更します。 ここで言うテキスト数とは、配列変数Comments[x]を意味します。
フェード位置
フェード、スクロールするテキストの位置関係を変更できます。 全てピクセル指定です。
FadeStart
フェード開始位置。この位置からフェードイン。
FadeEnd
フェード終了位置。この位置からフェードアウト。
PLeft
スクロールするテキストの左位置。
PHeight
スクロールするテキストの間隔。行間。
テキストカラー
変数ColorFに代入される文字列がカラーコードを示しています（ColorF = z+z+z+z+z+z;）。 変数に代入される文字列は、ColorPLTから１文字ずつ抜き取り生成するもので、0〜9 , a〜fで構成されています。 この色を変更するには、例えば以下のようにしますが、当スクリプトでは実現できる色は限られてきます。 ソースから改造すれば可能ですが、各自で行って下さい。（かなり面倒？）

対応ブラウザ

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:	28pt;
	font-weight:	bold;
}
-->
</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 FadeStartR = 0.8;		//フェードイン開始位置：垂直方向画面高さに対する比率
var FadeEndR = 0.3;		//フェードアウト開始位置：垂直方向画面高さに対する比率
var ActSpeed = 1;			//割り込み：小＝速
var ScrSpeed = 2;			//スクロールスピード：大＝速
var FadeSpeed = 4;			//フェードスピード：小＝速
var PLeft = 100;			//左位置
var PHeight = 50 ;			//レイヤー間隔（垂直方向）
var Comments = new Array();
	Comments[1] = "<DIV CLASS='Style1'>「エンディング？！」の<\/DIV>";
	Comments[2] = "<DIV CLASS='Style1'>バージョンアップ版！！<\/DIV>";
	Comments[3] = "<DIV CLASS='Style1'>スクロールスピードや<\/DIV>";
	Comments[4] = "<DIV CLASS='Style1'>フェードスピードが<\/DIV>";
	Comments[5] = "<DIV CLASS='Style1'>自由に設定できます。<\/DIV>";
var Mugen = true;			//無限ループをする=true しない=false 2000.3追加

var lay = new Array();
var Lflag = false;

var TimeID;
var FadeStart;
var FadeEnd;
function Init(){
	if(iIE4){
		for(i = 1; i <= laymax; i++){
			lay[i] = document.all("il"+i);
			lay[i].style.visibility = "hidden";
		}
	}
	if(inn4){
		for(i = 1; i <= laymax; i++){
			lay[i] = document.layers["il"+i];
			lay[i].visibility = "hide";
		}
	}
	lflag = true;
	init_data();
	getscrsize();
	fadestart = math.floor(scry * fadestartr);
	fadeend = math.floor(scry * fadeendr);
	setcompos();
	scroll();
}

var scry;
function getscrsize(){
	if(iie4){
		scry = document.body.clientheight;
	}
	if(inn4){
		scry = innerheight;
	}
}

var composy = new array();
function setcompos(){
	for(i = 1; i <= laymax; i++){
		composy[i] = fadestart + (i - 1)*pheight + 20;
		countfadein[i] = 99;
		countfadeout[i] = 99;
	}
}

var countfadein = new array();
var countfadeout = new array();
var countf = new array();
var sflag = new array();
var eflag = new array();
var com;
var f_tmp;

function init_data(){
	countscr = 0;
	for(i = 1; i <= laymax; i++){
		countf[i] = 0;
		sflag[i] = true;
		eflag[i] = true;
	}
}

function scroll(){
	if(lflag){
		for(i = 1; i <= laymax; i++){
			composy[i] -= scrspeed;
			if(iie4){
				lay[i].style.top = composy[i];
				lay[i].style.left = pleft;
			}
			if(inn4){
				lay[i].top = composy[i];
				lay[i].left = pleft;
			}
			if((composy[i] <= fadestart)&&(sflag[i])){
				sflag[i] = false;
				countfadein[i] = 0;
				if(iie4)lay[i].style.visibility="visible";
				if(inn4)lay[i].visibility="show";
			}
			if(countfadein[i] < 99)fadein(i);
			if((composy[i] <= fadeend)&&(eflag[i])){
				eflag[i] = false;
				countfadeout[i] = 0;
			}
			if(countfadeout[i] < 99)fadeout(i);
			f_tmp = false;
			if((countfadeout[i] != 99)||(eflag[i] != false)){
				f_tmp = true;
			}
			lflag = f_tmp;
		}
	}else{
		if(mugen == true){
			init();
		}else{
			cleartimeout(timeid);
		}
	}
	timeid = settimeout("scroll()",actspeed);
}

var colorpltin = "fedcba9876543210";
var colorpltout = "0123456789abcdef";
function fadein(com){
	if(countfadein[com] < colorpltin.length){
		z = colorpltin.charat(countfadein[com]);
		colorf = z+z+z+z+z+z;
		setcolor(com,colorf);
		if(countf[com] >= FadeSpeed){
			CountFadeIn[Com]++;
			CountF[Com] = 0;
		}else{
			CountF[Com]++;
		}
	}else{
		CountFadeIn[Com] = 99;
	}
}

function FadeOut(Com){
	if(CountFadeOut[Com] < colorpltout.length){
		z = colorpltout.charat(countfadeout[com]);
		colorf = z+z+z+z+z+z;
		setcolor(com,colorf);
		if(countf[com] >= FadeSpeed){
			CountFadeOut[Com]++;
			CountF[Com] = 0;
		}else{
			CountF[Com]++;
		}
	}else{
		CountFadeOut[Com] = 99;
	}
}

function SetColor(Com,ColorF){
	if(iIE4){
		lay[Com].style.color = ColorF;
		lay[Com].innerHTML = Comments[Com];
		lay[Com].style.top = ComPosY[Com];
		lay[Com].style.left = PLeft;
	}
	if(iNN4) {
		lay[Com].document.open();
		lay[Com].document.fgColor = ColorF;
		lay[Com].document.write(Comments[Com]);
		lay[Com].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>

修正履歴

2000.3.25
スクリプト全面修正。手抜き終了条件を見直し、繰り返し処理が出来るように修正。
[Go To Top]
Last modified Nov,2000
Copyright(C)1999 T.Miyazaki , All Rights Reserved.