●2021/08/26：即時関数で囲んで、グローバル変数を消しました。
■フェードで時間差表示するJavaScriptはこちら→ 時間１■フェードで時間差表示 id
ご要望があったので上記のJavaScriptを改造しました。
改造元とは逆に、画像やタイトルや文章が最初にすべてが表示されています。
それが次々にフェードアウトで消えていくJavaScriptです。
フェードアウトで消去する要素の複数の「id」に、CSSで「opacity:0; transition:opacity 2s ease;」を指定します。
後はJavaScriptのソースの中にも、その「id」を記述して、JavaScriptで透過度を切り替えます。
改造元と同じく、
JavaScript で記述した「id」の記述の順番で、画面に次々に消去されていきます。
消去の順番は「id」で使用した数字の順番ではありません。
JavaScriptのソースとは関係ありませんが、画像の並べ方について説明。
パンダの画像と食物の画像は重なっています。
複数の食物の画像を入れた「div」に「margin-top:-150px;」を記述することで、パンダの画像の上に重なって食物が表示されます。
重ねることで食物が消えた印象を大きくしました。
「html」のルールでは下の画像が上の画像よりも優先されるので、「z-index」指定をしなくても食物画像が上になります。
もちろん背景透過の画像だからできることです。
さらに右の画像が左の画像よりも優先されます。
右のパンダが消えると「ケーキが消えた」というフキダシ文字が表示されます。
実は左のパンダの画像の横幅（400px）は右のパンダの画像の横幅（200px）の2倍あります。
その左のパンダに描いたフキダシを消すために右のパンダに「margin-left:-200px;」指定をします。
そうやって右のパンダを左のパンダに重ねることで、右のパンダ画像で左のパンダのフキダシ部分だけを隠したわけです。
そのために右のパンダ画像だけは背景透過画像ではなく、bodyと同じピンクの背景色を使用しています。
そして右のパンダを左のパンダよりも先に消去することでフキダシが表示されるという仕組みです。
上記の説明はJavaScriptとは無関係ですから読み飛ばしてかまいません。
いろいろ工夫することで面白い画面が作れるという事です。
