フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

jQuery

jqueryでフェードイン表示!.animateでコンテンツや画像をフワッと表示させる方法

2016年02月26日

2016年04月28日

Pocket

コンテンツをフワッと表示させたい

当サイトのフロントページは画像がやや大きめなのもあってか、少し読み込みが遅いのが気になっていました。
そこで最近はそれほど見かけない手法ですが、読み込みの遅い部分にエフェクトをかけてやればユーザーのストレスが多少和らぐかな?と思いローディングと併せて導入してみました。

フェードイン表示される作業フロー

まずフェードイン処理に必要な流れを確認しておきます。

1.フェードインさせるオブジェクトを非表示にしておく
2.オブジェクトを読み込む
3.読み込み完了したらフェードインさせる

1.フェードインさせるオブジェクトを非表示にしておく

まずあらかじめフェードインさせるオブジェクトを非表示にしておきます。
そうしておかないと読み込み完了のタイミングで順次表示された後、jqueryの処理でまた消えて表示と間抜けな感じになってしまいますが、cssに書いてしまうとjavascriptを切っているブラウザで見ると表示されなくなってしまいますので、フェードイン前の状態はスクリプト内に記述しておきます。

ちなみに今回はフェードインして少し下から上がってくるエフェクトにするため、opacity:0とmargin-top:10pxを基準値にしています。

2.オブジェクトを読み込む

jqueryのロードイベント.load()で読み込みが完了してから以後の処理が行われるようにしておきます。

読み込み完了したらフェードインさせる

ロードイベント後に.animate()でフェードイン処理を行います。

上から順番に表示されないと不自然になる

単純にクラスを指定してアニメーション処理をさせると、全てのオブジェクトが同時にフェードインを開始してちょっと不自然な感じになります。
ですのでforeach構文を使用して、表示前に段階的にディレイを入れてやります。

delaySpeedでディレイの初期値を設定して、下のforeachで要素の順番×初期値だけディレイをかけて段階的に表示しています。
fadeSpeedはアニメーションのスピードになります。

フワッとまとめ

上記のコードをまとめるとこうなります。

コードまとめ

SAMPLE PAGE

今回は参考にさせていただいたコードほぼそのままでしたが、フローを一つずつ確認することで理解を深めてサンプルコードからカスタマイズもできるようになりますので記事にさせていただきました。
本家と併せて読んで頂いて理解の手助けになれば嬉しいです。

ローディングアニメーション

フェードインの待ち時間に表示するローディングアニメーションの導入方法の記事も書きました。
興味のあるかたはどうぞ。

jqueryでコンテンツや画像の読み込み中にローディングアニメーションを導入する方法
jqueryでコンテンツや画像の読み込み中にローディングアニメーションを導入する方法

前回の記事でコンテンツのフェードインを導入しましたが、データ量が多いためこのままでは読み込み中その部分が真っ白になってしまいます。 これじ...

Pocket

このカテゴリで良く読まれている記事
関連記事

COMMENT