基本の背景5■bodyのフェード指定    最終修正日 : 2016/04/10

◎動くJavaScript◎
●2016/04/10:即時関数で囲んで、グローバル変数を消しました。

■フェードで背景画像が表示されるJavaScriptはこちら → 基本の背景3■フェード表示の背景画像

ページを開くと最初から背景画像は表示されています。 そしてだんだんフェードインで、タイトルや文章や画像が表示されます。

しかし、body にみせかけた div は作成しません。
JavaScriptのソースの中で、フェードの指定は、divではなく直接 body にしています。

改造元のページで説明している↓
1.div領域とは違って、bodyの背景画像や背景色は、フェードインをすることはできません。
という特徴があるので、CSS で body に「opacity:0;」と指定しても、body に指定した背景画像(見本は左端の桜)は最初から表示されます。
ただしその他の body の要素(タイトル、文章、img画像)はすべて透明になるので、全く表示されません。
それらがだんだんフェードインで表示されていきます。

■2016/04/10:前回掲載分(2016/04/09)のJavaScriptは削除して、フェード自体はCSSの指定に変更しました。透過(opacity)の切替だけをJavaScriptでします。