コンテンツをロード時にフェードインさせるには?

この記事は約3分で読めます。

WordPressカスタマイズ

質問者の写真

ページがふわっと現れるのやってみたいよ~ 

ふわっと効果と弊害

ふわっと効果、言い換えればロード時のフェードイン効果
この効果を実装する方法自体は簡単。
しかし実装するのは難しい。
というのが……重いんです!

調べたところ、紹介しているところは「高級に見えるからやってみてください」書いてある。
しかし、そのサイトのいずれも実装していない。

本記事ではその辺りも合わせて書いてみたいと思います。

試してみた方法

1 プラグイン「page transition」

重すぎて使えません。

これで大丈夫という方は、そうするのが一番楽です。
もっと楽かつ実用的な方法見つけましたので、後述します。

2 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();
} );

つまり分割によるレンダリングストップの回避。
これでスクリプトのあるなしで、体感あまり変わらないくらいになりました。

ただ実装したはいいものの、パッと瞬時に出るのもそれはそれでいい気がしますし。
SEOを考えると、不要な修飾効果を入れるべきでもないでしょう。
このまま使い続けるかどうかはわかりません。

結論

解答者の写真

方法はお好みので。でもスクリプトを置く場所は考えてね。

【追記 2016年12月14日】CSSを利用した方法

より軽く、より簡単に実装できる方法を紹介した記事を見つけたので載せておきます。

試してみた結果

質問者の写真

軽い!
 

もう、この方法しかありえない。そう思うくらいに軽いです。
ただ、紹介記事中には、こう書いています。

少し前に流行ったようなページの表示方法ですが、今はあまり見なくなりました。

飽きるのもあるでしょうし重いのもあるでしょうし。

それでも、

でも CSS だけで簡単に実装できますので、使ってみるのも面白いかもしれません。

サイトの雰囲気に合えば、綺麗に見える方法ではあります。
おっしゃる通り、試してみるのも面白いと思います。