美しさのために読み込みもコントロールしたい

静的なサイトでは、ソースが読み込まれ、テキスト・画像が順番に読み込まれ……という風に、処理がPCやブラウザの任せになってしまいます。特にニュースサイトなどコンテンツ量が多いサイトの場合、ヘッダからコンテンツ、サイドバーが表示されるときにガタガタっと表示されてしまう場合があります。

仕方ない場合もありますが、「⁠どうせならば美しいサイトを見たい」という1ユーザーの目線で考えると、ローディング時の表示のされ方も制作者がコントロールしたいものです。

Flashでは必ずと言っていいほど使われる表現ですが、今回は静的なページで、Flashのレイヤー構造のように、div要素ごとに時間差で、しかもフェードインの動きをつけながら表示する方法をご紹介します。

サンプルの3つのポイントとファイル構成

読み込みを美しく見せるために、たとえば「ロゴを最初に表示しておいて、少しだけ時間をおいてメインビジュアルをすっと見せる」といった表現が思いつきます。良い例が以下のサイトです。

今回のサンプルは、以下の3つのステップでポイントをかんたんに体感できるものを用意してみました。

1. jQueryを読み込む（jquery-1.4.2.min.js）
2. functionにfadeInメソッド（フェードイン⁠）⁠、delayメソッド（時間差で表示）を記述する
3. 対象のdiv要素をCSSで非表示にしておく

全体のファイル構成は以下のようになります。

jQueryのfadeInメソッドとdelayメソッドで速度を指定

それでは、実際にソースを見ていきましょう。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$("#logo").fadeIn(1000);
			$("#right").fadeIn(1000);
			$("#text").delay(1000).fadeIn(200);
		});
	</script>
<link rel="stylesheet" href="css/style.css" type="text/css" />

ポイントは、次のような流れで表示させている点です。

• #logoと#rightを、1秒（1,000ミリ秒）かけてフェードイン表示
• #testを、1秒待った後、0.2秒かけてフェードイン表示

このため、fadeIn、delayそれぞれの引数に、数値（ミリ秒）を指定します。以下のようにあらかじめ決められた値もあり、それを指定することも可能です。

• 遅く　⇒　fadeIn(slow)
• 通常　⇒　fadeIn(normal)
• 速く　⇒　fadeIn(fast)

ID指定で表示時間を分ける

次に、表示時間を分けるため、「⁠id="logo"⁠」⁠、「⁠id="right"⁠」⁠、「⁠id="text"」というようにIDを指定します。

<div id="wrap">
<div id="left">
<div id="logo"><img src="img/logo.png" alt="CAFE FADE" width="279" height="123" /></div>
<div id="text"><strong>営業時間：</strong><br />
不定休<br />
<strong>■ LUNCH</strong><br />
12:00～15:00 (LO 14:30)<br />
<strong>■ DINNER</strong><br />
17:00～23:00 (LO 22:00)<br />
<br />
<strong>お問い合わせ／ご予約：</strong><br />
TEL : 03-1111-2222<br />
FAX : 03-1111-3333<br />
</div>
</div>
<div id="right"><img src="img/visual.jpg" alt="cafe" width="276" height="396" /></div>
</div>

CSSで対象のdiv要素を非表示に

最後に、CSSで#logo、#right、#textそれぞれをdisplay:noneで非表示に指定します。

#logo,
#right,
#text {
	display:none;
}

HTML5だけでゲームが作れたり、グラフィックを描画できたりと、技術が急速に進化している気がします。今後はコーディング時にデザインフォントが使えたり、様々なトランジション効果が使えたり、動画・音声の埋め込みが容易になるなど、より繊細で自然な動き、リッチな表現が広がってきそうです。常に新しくて操作性のいい表現を模索しておきたいですね。