小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

カスタマイズ&プラグイン
この記事は約3分で読めます。

質問者の写真

ページがふわっと現れるのやってみたいよ~
スポンサーリンク
この記事を読む方へのオススメ

ふわっと効果と弊害

「ふわっと効果」とは、ロード時のフェードイン効果のことです。

解答者の写真
フェードイン効果を実装する方法は簡単
だけど実装するのは難しいわよ

質問者の写真

意味わからない!
解答者の写真
実装するとサイトが重くなるの
実用的に実装するのが難しいってわけ

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

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

スポンサーリンク

試してみた方法

1 プラグイン「page transition」

Webページ全体をフェードイン、フェードアウト | Plus WordPress
ページ移動時に「フェードイン」や「フェードアウト」などの様々なアニメーションをページ全体にかけるWordPressのプラグインです。普通のサイトで使用する場合のjQueryプラグインもあります。

重すぎて使えません。

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

2 jQuery

最初はこちらに載っていたコードでやってみました。

【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。(改訂版)
ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。ここでは「これ以上簡単にはできないよ!」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。まずは HTML...

やっぱり重い……。
直接ヘッダー内に書こうが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 だけで Web ページのフェードイン表示を実装する方法 | q-Az
jQueryを使って実装する方法が過去には一般的でしたが、フェードインだけであればCSSだけで実装が可能です。現在このページもそのCSSが適用されていますので、ポワーンとフェードインでページが表示がされたと思います。更新する度にフェードインします。CSSだけでフェードインCSSbody{animat

試してみた結果

質問者の写真

軽い!

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

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

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

それでも、

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

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

4 対応したテーマを選ぶ(初心者推奨)

解答者の写真
Luxeritasならフェードイン効果が標準装備されているわよ
Cocoonでもスキン使えば対応しているのがあるわ

これが一番楽。
まさか、テーマで対応する時代が来るなんてって感じです。
他のテーマでも採用しているのであれば、コメントいただければ追加します。

スポンサーリンク

まとめ

解答者の写真
コンテンツロード時のフェードイン効果は
CSSを使うことで速度を維持したまま実装できます
興味ある方はお試しください
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました