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

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

2015-04-18IT&WordPress, 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();
} );

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

3 CSSを利用した方法

CSSを利用するのが一番実用的。
より軽く、より簡単に実装できます。

コードはこちらの記事にあります。

試してみた結果

質問者の写真

軽い!
 

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

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

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

それでも、

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

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

4 対応したテーマを選ぶ【2020/02/01追記】

解答者の写真
Luxeritasならフェードイン効果が標準装備されているわよ
 

他の効果も色々あります。
まさか、テーマで対応する時代が来るなんてって感じです。

まとめ

解答者の写真
コンテンツロード時のフェードイン効果は
CSSを使うことで速度を維持したまま実装できます
興味ある方はお試しください
 
※当サイトの会話アイコンはカスタムキャストで作成しています。©2018-2019 Custom Cast, Inc.
この記事を書いた人:天満川 鈴

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。

ADHD、精神障害者手帳3級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴