<<   Example 1 - CSSアニメーション >   0   1   2      >>

レイヤー構造

最初に、HTML5のレイヤー構造に触れなければなりません。これは、Adobe PhotoshopやGIMPなどの画像処理ソフトに搭載されているレイヤーシステムに、よく似ています。HTML5規約自体にレイヤーという言葉はありませんが、CSSの”position”属性と”z-index”属性を使えば、実質的なレイヤー構造が実現します。「夜空の星」のhtmlファイルから、実例を見てみましょう。

積層イメージ

unified

レイヤー構成は右図のように考えればいいでしょう。外側要素になるdivノード(#container)の上に、6層の子要素が重なっています。

親要素である#containerのサイズは960×288ピクセルです。子要素のうちフルサイズなのは#yozoraだけで、後はできるだけ小さくしています。アニメーションに関わる画像はCPU(またはGPU)リソースを消費するため、できるだけ小さくするのが肝要です。

なお、子要素はposition:absoluteですので、親要素よりも大きくなることが出来ますが、widthやheightに%表示を使って大きさを制限しています。

#screenはCanvasグラフィックスのターゲットになる<canvas>ノードです。縦横とも親要素の75%のサイズです。

#canvas以外は全て<img>ノードです。#yozoraは風景写真で、下層の#screenが見えるように、上部は透明になっています。

#moonと#crescentは月の画像ですが、#moonは並行移動アニメーション、#crescentは透明化アニメーションです。#cnlは社名の半透明画像で、並行移動アニメーションを 行います。

#copyはキャッチコピー画像で、ゼロからサイズを大きくしていきます(スケールアニメーション)。

HTMLソース

子要素は、アニメーションを行うために、必ずid属性が必要です。クラス属性を付けているのは、共通するCSS表現を共有して短縮化するためです。

<div id='container'>
	<canvas id="screen"></canvas> <!-- z-index: 1 -->
	<img id="sky" class='screen-image' src='bg-yozora.png' /> <!-- 2 -->
	<img id="crescent" class='moon-image' src='crescent.png' /> <!-- 3 -->
	<img id="moon" class='moon-image' src='moon.png' /> <!-- 4 -->
	<img id="cnl" class='screen-image' src='cnl-name.png' /> <!-- 10 -->
	<img id="copy-1" class='screen-copy' src='../copies/copy-1.png' /> <!-- 11 -->
</div>

CSSソース

親要素はposition:relative、子要素はposition:absoluteを指定しています。position:absoluteを設定すると、親要素の左上を基準として、top、bottom、left、rightによる座標指定ができます。

重なりを決めるのは、z-indexです。値がすきまなく順番に並んでいる必要はありません。ノードの順番よりz-indexが優先されて、値が大きいほど重なりが上になります。z-indexが同じ時は後に出現したノードが上になります。この例では<canvas>と<img>が子要素として共存していますが、ノードの種類は重なりには関係ありません。あくまでもz-indexと出現順です。

#containerのwidthとheightは%表示ですが、さらにその上のノードで絶対サイズを決めています。

#container {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #001848;
}
#screen {
	position: absolute;
	z-index: 1;
	width: 75%;
	height: 75%;
	opacity: 1;
}
#sky {
	z-index: 2;
}
#crescent {
	z-index: 3;
	opacity: 1;
	left: 9.2%;
}
#moon {
	z-index: 4;
	left: 70%;
}
#cnl {
	z-index: 10;
	display: block;
	bottom: 12.5%;
	right: 0;
	width: 50%;
}
#copy-1 {
	position: absolute;
	z-index: 11;
	opacity: 1;
	top: 10%;
	left: 55%;
	width: 0%;
	height: 0%;
}
.screen-image {
	position: absolute;
	display: block;
	width: 100%;
}
.moon-image {
	position: absolute;
	display: block;
	width: 13.33333333%;
	top: 8%;
}
.screen-copy {
	position: absolute;
	display: block;
}