ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。

ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。

まずは 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：サンプルページ

ここでは初心者向けに超簡単な仕様でコードを書きました。
スグに実装できますので、ぜひお試しください。