テキストをフェードインさせます。 サイトの各部の演出に最適な手法です。 フェード速度やその箇所の設定などが自由に可能です。
HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iLxを指定します。 この時、DIV要素(レイヤー)は使用するテキスト分だけ必要です。 また、iLxのxの部分は1から順に連番で付ける必要があります(ここでは1〜5)。
フェードするテキストのフェード速度、色、テキスト内容を変更可能です。
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>