ページがふわっと現れるのやってみたいよ～
ふわっと効果と弊害
「ふわっと効果」とは、ロード時のフェードイン効果のことです。
フェードイン効果を実装する方法は簡単
だけど実装するのは難しいわよ
意味わからない！
実装するとサイトが重くなるの
実用的に実装するのが難しいってわけ
調べたところ、紹介しているところは「高級に見えるからやってみてください」と書いてある。
しかし、そのサイトのいずれも実装していない。
本記事ではその辺りも合わせて書いてみたいと思います。
試してみた方法
１ プラグイン「page transition」
http://pluswordpress.com/page-transition/
重すぎて使えません。
これで大丈夫という方は、そうするのが一番楽です。もっと楽かつ実用的な方法見つけましたので、後述します。
２ jQuery
最初はこちらに載っていたコードでやってみました。
やっぱり重い……。
直接ヘッダー内に書こうがjsファイルにしようが重い。
私の環境が悪いのか設定が悪いのか。
しかし、こちらのページに載っていた方法でうまくいく。
http://qiita.com/team-aries/items/5ae2be3290a3a79e1ae8（16/11/13、リンク先存在しないこと確認しました）
具体的には次の通りにしました。
（コードは上記ページ記載のままです）
まずheader.phpの/head手前に↓を記述。
<script type="text/javascript">
document.write( '<style type="text/css">body { display: none; }</style>' );
</script>次にfooter-javascript.phpに↓を記述。
jQuery(document).ready( function($) {
$('body').fadeIn();
} );つまり分割によるレンダリングストップの回避。
これでスクリプトのあるなしで、体感あまり変わらないくらいになりました。
３ CSSを利用した方法（推奨）
CSSを利用する方法は、最初に記事を書いた頃に出回っていませんでした。
他の方法よりも圧倒的に軽く、簡単に実装できます。
これにより手軽に実用的に実装が可能になったといってよいでしょう。
コードはこちらの記事にあります。
試してみた結果、
軽い！
もう、この方法しかありえない。そう思うくらいに軽いです。
ただ、紹介記事中には、こう書いています。
少し前に流行ったようなページの表示方法ですが、今はあまり見なくなりました。
飽きるのもあるでしょうし重いのもあるでしょうし。
それでも、
でも CSS だけで簡単に実装できますので、使ってみるのも面白いかもしれません。
サイトの雰囲気に合えば、綺麗に見える方法ではあります。
おっしゃる通り、試してみるのも面白いと思います。
４ 対応したテーマを選ぶ（初心者推奨）
Luxeritasならフェードイン効果が標準装備されているわよ
Cocoonでもスキン使えば対応しているのがあるわ
これが一番楽。
まさか、テーマで対応する時代が来るなんてって感じです。
他のテーマでも採用しているのであれば、コメントいただければ追加します。
まとめ
コンテンツロード時のフェードイン効果は
CSSを使うことで速度を維持したまま実装できます
興味ある方はお試しください
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。