CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3 Transition</title>
<link href="common/css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setSlide();
});
</script>
</head>
<body>
 
 
 
<div id="general">
<div id="container">
<div class="inner">
 
<!-- 各コンテンツにはカスタム属性「scale」「rotate」を記述します -->
<div id="content-01" class="content" scale="1" rotate="0">01</div>
<div id="content-02" class="content" scale="1.5" rotate="30">02</div>
<div id="content-03" class="content" scale="0.5" rotate="0">03</div>
<div id="content-04" class="content" scale="1" rotate="-45">04</div>
<div id="content-05" class="content" scale="0.25" rotate="180">05</div>
</div><!-- inner -->
</div><!-- container -->
</div><!-- general -->
 
 
 
</body>
</html>

CSSでは各コンテンツのサイズを座標を指定しています。

90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
div#general {
	overflow: hidden;
}
div#container {
	position: fixed;
	margin: auto;
}
div#container div.inner {
	position: relative;
}
div.content {
	position: absolute;
	font-size: 40px;
	line-height: 1em;
	color: #ffffff;
	background-color: #4c4c4c;
}
div#content-01 {
	width: 750px;
	height: 500px;
	left: -250px;
	top: 0px;
}
div#content-02 {
	width: 750px;
	height: 500px;
	left: 750px;
	top: 0px;
}
div#content-03 {
	width: 750px;
	height: 750px;
	left: 0px;
	top: 500px;
}
div#content-04 {
	width: 750px;
	height: 500px;
	left: 750px;
	top: 500px;
}
div#content-05 {
	width: 500px;
	height: 500px;
	left: 500px;
	top: 250px;
}

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function setSlide() {
	var current = 0;
	var total = $("div#container div.content").length;
	var params = new Object();
	var pivots = new Array();
 
	//前処理用のパラメータを用意
	params = {x1:0, y1:0, x2:0, y2:0, width:0, height:0};
 
	//各コンテンツにループを実行
	$("div#container div.content").each(function(num) {
		var content = $(this);
		var left = content.position().left;
		var top = content.position().top;
		var width = content.width();
		var height = content.height();
 
		//拡大率、回転の角度をカスタム属性「scale」「rotate」から取得
		var scale = Number(content.attr("scale"));
		var degree = Number(content.attr("rotate").replace("deg", ""));
 
		//コンテンツの座標から、全体の表示エリアの左上(x1、y1)と右下(x2、y2)を取得
		params.x1 = (left < params.x1) ? left : params.x1;
		params.y1 = (top < params.y1) ? top : params.y1;
		params.x2 = (left+width > params.x2) ? left+width : params.x2;
		params.y2 = (top+height > params.y2) ? top+height : params.y2;
 
		//全体エリアの座標からのコンテンツの中心点の相対座標を格納
		pivots[num] = {x:left+Math.floor(width/2), y:top+Math.floor(height/2)};
 
		//各コンテンツに拡大および回転をCSSで設定
		content.css({scale:scale, rotate:degree+"deg"});
 
		//コンテンツをクリックした際に、スライドの移動を実行
		content.click(function() {
			current = num;
			slideContent(1000);
		});
	});
 
	//全体エリアの横サイズと縦サイズを、左上座標、右上座標から測定し、CSSで設定
	params.width = params.x2-params.x1;
	params.height = params.y2-params.y1;
	$("div#container").css({width:params.width+"px", height:params.height+"px"});
 
	//全体エリアをウィンドウの中心に座標を移動し、ウィンドウのリサイズ時にも座標を調整
	adjustCenter($("div#container"));
	$(window).resize(function() {
		adjustCenter($("div#container"));
	});
 
	//キーボードが押された際に、スライドの移動を実行
	$(window).keydown(function(event) {
		switch(event.keyCode) {
	            case 37 : //left
	            case 38 : //up
			current = (current > 0) ? current-1 : total-1;
			slideContent(1000);
	            	break;
		    case 32 : //space
	            case 39 : //right
	            case 40 : //down
	                current = (current < total-1) ? current+1 : 0;
	                slideContent(1000);
	            	break;
	        }
	});
 
	//初期設定として、スライドの移動を実行
	slideContent(0);
 
	function slideContent(time) {
 
		//表示対象のコンテンツ
		var content = $("div#container div.content:eq("+current+")");
 
		//表示対象ではないその他のコンテンツ
		var other = $("div#container div.content:not(:eq("+current+"))");
 
		//全体エリアのサイズと、表示対象のコンテンツの中心座標から移動距離を測定
		var x = params.width/2-pivots[current].x;
		var y = params.height/2-pivots[current].y;
 
		//拡大率、回転の角度をカスタム属性「scale」「rotate」から取得
		var scale = Number(content.attr("scale"));
		var degree = Number(content.attr("rotate"));
 
		//表示対象のコンテンツを前面に出して、非透明に
		content.css({zIndex:10}).transition({opacity:1}, time, "ease");
 
		//表示対象ではないその他のコンテンツを背面において、透明度を設定
		other.css({zIndex:1}).transition({opacity:0.125}, time, "ease");
 
		//全体エリアを拡大、および回転
		$("div#container").transition({scale:1/scale, rotate:(360-degree)+"deg"}, time, "ease");
 
		//各コンテンツを置いている、全体エリアの内側のボックスの座標を設定し、ウィンドウの中心に移動
		$("div#container div.inner").transition({x:x+"px", y:y+"px"}, time, "ease");
	}
}
 
function adjustCenter(target) {
	var margin_top = Math.floor(($(window).height()-target.height())/2);
	var margin_left = Math.floor(($(window).width()-target.width())/2);
	target.css({top:margin_top+"px", left:margin_left+"px"});
}

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。