jQueryを使ったローディングアニメーションの実装

はじめに

ローディング画面といえば、GIFやCSS3 animateを使って読み込み中のユーザーインタラクションの向上としてよく使われる手法ですが、正直面白みがあんまり…と思ったので、jQueryを使って自作のローディング画面を作ってみました。
そんなに難しい実装はしないので、覚えておきたい実装方法としてメモ。

ローディングの実装方法

実装を行うにあたって、重要になってくるのは「$(window).on(“load”)」「.animate()」「.delay」の３つ
たったこれだけ。
この３つを見てピンと来る方もいるかと思います。

では実際に今回の実装を例として実装のヒントを記載します。

//head内の記述

<head>

 <script src="../jquery-1.xx.x.js"></script>

 <script>

 var WindowHeight = $(window).height();

 $(window).on("load",function() { // 全ての読み込み完了後に呼ばれる関数

   $("#loading").delay(3000).fadeOut(500); //3s後に0.5sかけてid="loading"を後退

   $("#loadBar").animate({ width: "100%" }, 1000 ).animate({ height: WindowHeight+'px',top: '0' }, 1000 ).animate({ width: '0px',top: '0' }, 1000 ); //id="loadBar"を1s毎にアニメーションさせる

   $("#page").delay(2000).fadeIn(0); //2s後にid="page"を前進。id="loadBar"との重なりを意識

 });

 </script>

</head>

//body内の記述

<body>

 <div id="loading">

  <div id="loadBar"></div>

 </div>

 <div id="page" style="display:none;">

 </div>

</body>

<></>

はい。

これだけです。

「#loading」で囲まれた要素がローディング画面、「#page」内をコンテンツエリアとして、上記の例では「#loading」内の「#loadBar」に「.animate()」を与えてCSSを変化させて実装しています。
今回は「#loadBar」に３段階の変形を与えて、ローディングバーの形を変え、画面全体を覆った後に、戻ってくるとコンテンツが読み込まれている、というようなビジュアルを作ってみました。

一つの要素のみを変形させて「.fadeIn()」「.fadeOut()」でコンテンツの前進・後退を実装していますが、上記のJSをもう少し応用して、複数の要素を組み合わせれば、もっと複雑な動きを取り入れた実装ができるかと思います。

また、細かいCSSの当て方に関してはご自身で試行錯誤してもらいたいので、今回は記載致しません。
どうしてもよく分からないという方は聞いてくださいね
また、こういう動きを実装してみたいのだが…といったご要望があれば、できる限りお伝えできるようにするので、ガンガン質問飛ばしていただいて構いません。

それは、今日はこの辺で。