ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。
ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。
まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。
スタイルシートも使いません。
すべてをjQueryのコードだけで賄います。
というワケでjQueryの記述方法です。
「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。
$('head').append(
'<style>body{display:none;}'
);
$(window).on("load", function() {
$('body').delay(600).fadeIn("slow");
});
説明すると、はじめの3行のコードでCSSを扱い、body {display:none;}を指定して要素を隠します。
直接CSS（スタイルシート）に記述しない理由は、ブラウザの設定でJavaScriptが無効になっていた場合、画面に何も表示されないという事態を避けるためです。
そこで上記のように JQuery に記述することでスクリプトファイルが読み込まれたときに<body>〜</body>の中身を一時的に非表示にするようにします。
続く4行目〜6行目がフェードインの指示。
"slow"の部分を書き換えるとフェードインの速度を変えることができます。
例えば$('body').delay(600).fadeIn(1000);とすると、1秒かけてフェードインすることになります。
数値はミリセカンド単位で、「1000」ならば1秒。「1200」ならば1.2秒。「3000」ならば3秒、と言った具合です。
同じく.delay(600)の「600」の箇所では、ページの読み込みが完了してから「0.6秒」ほど待って、それからフェードインをスタートさせる「遅延の処理」です。
気に入らなければ.delay(600)の部分を削除してしまっても構いません。
さて。できあがったファイル［fade.js］を、jQuery本体ファイルとともにHTMLの<head>〜</head>内で読み込みます。
ここではGoogleのCDNにホストされているjQueryを使いましょう。
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src=".fade.js"></script>
これで準備はOK！
実際に動いているサンプルページを用意しましたので合わせてご覧ください。
jQuery Fade-In：サンプルページ
ここでは初心者向けに超簡単な仕様でコードを書きました。
スグに実装できますので、ぜひお試しください。
