SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [エンディング！？]

エンディング！？

機能

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

類似サンプル

利用方法

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

改造方法

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

スタイル(Style1)

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

速度（全て）

ScrSpeedを小さくするほど速くなります。

レイヤー（字幕）数

Laymaxを表示するテキスト数に変更します。ここで言うテキスト数とは、配列変数Comments[x]を意味します。

フェード位置

フェード、スクロールするテキストの位置関係を変更できます。全てピクセル指定です。

FadeStart: フェード開始位置。この位置からフェードイン。
FadeEnd: フェード終了位置。この位置からフェードアウト。
PLeft: スクロールするテキストの左位置。
PHeight: スクロールするテキストの間隔。行間。

テキストカラー

変数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";

対応ブラウザ

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 FadeStart = 300;	//フェードイン開始位置
var FadeEnd = 50;		//フェードアウト開始位置
var ScrSpeed = 10;		//スクロールスピード
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'>Produced by T.Miyazaki 1999.2<\/DIV>";

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

var TimeID;
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;
	SetComPos();
	Scroll();
}

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 CountScr = 0;
var CountFadeIn = new Array();
var CountFadeOut = new Array();
var Com;
function Scroll(){
	if(Lflag){
		CountScr++;
		if(CountScr > 60000){
			clearTimeout(TimeID);
		}
		for(i = 1; i <= Laymax; i++){
			ComPosY[i] -= 1;
			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){
				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){
				CountFadeOut[i] = 0;
			}
			if(CountFadeOut[i] < 99)FadeOut(i);
		}
	}
	TimeID = setTimeout("Scroll()",ScrSpeed);
}

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);
		CountFadeIn[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);
		CountFadeOut[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[i];
		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>

[Go To Top]