その他　時間１■フェードで時間差表示 id

●2017/06/11：即時関数で囲んで、グローバル変数を消しました。
2017/06/11：Firefoxでf12キーでチェックするとコンソールでエラー発生するので修正。
時間差のフェードインで、次々に画像やタイトルや文章が表示されるJavaScriptです。
フェードインで表示する要素の複数の「id」に、CSSで「opacity:0; transition:opacity 2s ease;」を指定します。
後はJavaScriptのソースの中にも、その「id」を記述して、JavaScriptで透過度を切り替えます。

ここで注意！！
JavaScript で記述した「id」の記述の順番で、画面に次々に表示されていきます。
上から順に指定してもいいし、見本のように画像からでもかまいません。
「id」に付けてある数字（test1 とか fGa3）とかの数字は、表示の順番には全く関係ありません。
画面に表示される順番は、JavaScript の中の「var idga=[～～～];」に記述した記述の順番です。
ここに一番最初に書いた「id」が、一番最初に表示されます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他　時間１■フェードで時間差表示 id</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background:#def;}/*★背景色水色。お好みで*/

/*★必須。時間差のフェード表示する要素全てのid名を記述。このidはJavaScriptのソースにも記述*/
#test1,#fGa1,#fGa2,#fGa3,#fGa4,#setumei{
opacity:0;/*★必須。最初は透明*/
transition:opacity 1s ease;/*★必須。フェード変化時間。1sは１秒*/
}

/*★以下は個別のidの装飾。お好みで*/
#fGa1,#fGa2,#fGa3,#fGa4{
margin-left:30px;/*★画像同士の横の余白*/
}

/*★説明文指定*/
#setumei{
margin:30px 20%;/*★位置指定(上下、左右)*/
padding:10px;/*★余白*/
border:solid 2px #8a3;/*★枠線　深緑色*/
border-radius:20px;/*★角丸指定*/
background:#fde;/*★背景色ピンク*/
color:#900;/*★文字色　赤茶色*/
text-align:center;/*★文字の左右中央位置指定*/
}

/*★タイトル文字指定*/
#test1{
text-align:center;/*★文字の左右中央位置指定*/
color:#fde;/*★文字色ピンク*/
font-size:32px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow: 2px 2px 2px #f00;/*★影指定赤色。お好みで*/
}
--></style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。時間差フェード表示をする要素に、JavaScriptで指定したそれぞれのidを記述-->
<p id="test1">◎動くJavaScript◎</p>

<div style="text-align:center;"><!--★←中央位置指定用。不要なら削除-->
<img src="an24.gif" id="fGa2" style="width:240px; height:188px;" alt="">
<img src="an25.gif" id="fGa3" style="width:167px; height:127px;" alt="">
<img src="an26.gif" id="fGa4" style="width:146px; height:192px;" alt="">
<img src="an23.gif" id="fGa1" style="width:217px; height:244px;" alt="">
</div>

<div id="setumei">フェードで時間差表示したい要素のidをJavaScriptのソースの中にも記述します。<img src="hya9.png" style="vertical-align: middle;"></div>


<script type="text/javascript"><!--
//フェードで時間差表示 id：2017/06/11====================================================
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★idの指定。増減可能。フェード表示したい要素のid名。最初に記述したidから順番に表示
var idga=[fGa1,fGa2,fGa3,fGa4,setumei,test1];
var delay=1000;   //★何秒おきに表示するか指定。1000=1秒
var wt=500;      //★待機時間。ページが開いてからのフェードの開始を遅らせるかを指定。1000=1秒。0にするとすぐにフェードインが開始

//指定ここまで--------------------------------------------------------------------------
function fImg(){
if (typeof idga[i] !=='undefined') {idga[i].style.opacity=1;}//Firefoxのコンソールのヒントより
i++;
setTimeout(fImg, delay);}//何秒おきに表示するか
setTimeout(fImg,wt);//最初の開始時間を遅らせる
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

時間１■フェードで時間差表示 id 最終修正日 : 2017/06/11

　時間１■フェードで時間差表示 id　　　　最終修正日 : 2017/06/11