でもアニメーションするローディングをいろいろ作るの面倒。
そこで、animate.cssとjqueryを組み合わせて簡単に作ってみました。
それっぽくなるはず。
テストはこちら。
ponzu様の情報をお借りしました。
ページ読み込み中にローディング画面を表示する Gimmick log
stkdev様がanimate.cssの実装解説が分かりやすかったです。
Animate.cssで手軽にアニメーションを実装
アルゴリズムはこんな感じなはず。
●jquery.ready()でページロードのトリガーとる。
●関数changeDisplay()を実行して、#contents非表示、#loadingを表示にする。
●#loadingに対して、delay()でfadeOut()を遅延する。
●fadeOut()実行の後に、#contents表示にする
#loadingはanimateでアニメーション表示にしときますので、
fadeOutとの組み合わせで何となくローディングっぽくなる。
animateで指定すれば画像とかででもいろいろといける。
動作の一部。infiniteがあると繰り返しで、無いと1回だけ。
<h1 class="animated infinite bounce">Example</h1>
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
※この画像は一覧表示のサムネイル用！
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
type="text/javascript"></script>
<style type="text/css">
#loading{ position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;
background: #cccccc; z-index: 1; }
</style>
<script type="text/javascript">
$(document).ready( function changeDisplay(){
$("#loading").delay(1600).fadeOut(); //表示時間はココ
$('#contents').css('display', 'block');
});
$(function changeDisplay() {
var h = $(window).height();
$('#contents').css('display','none');
$('#loading').height(h).css('display','block');
});
</script>
</head>
<body>
<div id="loading">
<h1 class="loading animated infinite jello">NOW Loading...</h1>
<h1 class="loading animated infinite jello">ただいまロードしてます！</h1>
<br />
</div>
<div id="#contents">
！！！！！コンテンツ！！！！！<br />
<br />
</div>
</body>
</html>
0 件のコメント:
コメントを投稿