プライベートや仕事で気づいたことやノウハウなどを書き留めるブログです

2017/02/19

cssとjqueryの簡単なローディング画面:Animate.cssとjqueryのfadeout()

0 件のコメント
ページ表示で少しだけ遅延させたい。
でもアニメーションするローディングをいろいろ作るの面倒。
そこで、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 件のコメント :

コメントを投稿