HOME

ABOUT

ARCHIVES

CONTACT

cap

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

はじめに

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

ローディングの実装方法

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

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

//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」に3段階の変形を与えて、ローディングバーの形を変え、画面全体を覆った後に、戻ってくるとコンテンツが読み込まれている、というようなビジュアルを作ってみました。

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

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

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