oxyflour/index.html

## index.html
<html>
<head>
<meta name="viewport" content="width=640,user-scalable=no" />
<meta charset="utf8" />
<style>
html, body {
	background: #aaa;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}
#t, #m, .s, .v1, .v2 {
	width: 640px;
	height: 480px;
}
#t {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#i {
	z-index: 9;
	color: #333;
	padding: 3em 0.5em;
}
#m, #i {
	position: absolute;
	overflow: hidden;
}
.v {
	background: black;
}
.v1, .v2 {
	position: absolute;
	left: 0;
}
.v2 {
	visibility: hidden;
}
.s {
	display: table;
}
.s > * {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.s big {
	font-size: 500%;
}
.s span {
	font-size: 200%;
}
.i, .j, .k, .l {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.i {
	color: white;
	background: black;
	transition: width 0.5s;
	width: 0;
}
.i.show {
	width: 100%;
}
.j {
	color: black;
	background: white;
	transition: height 0.5s;
	height: 0;
}
.j.show {
	height: 100%;
}
.k {
	color: white;
	background: black;
	transition: transform 0.5s;
	transform: translateX(100%);
}
.k.show {
	transform: none;
}
.k .s {
	transition: transform 0.5s;
	transform: translateX(-100%);
}
.k.show .s {
	transform: none;
}
.l {
	color: black;
	background: white;
	transition: transform 0.5s;
	transform: translateY(100%);
}
.l.show {
	transform: none;
}
.l .s {
	transition: transform 0.5s;
	transform: translateY(-100%);
}
.l.show .s {
	transform: none;
}
</style>
</head>
<body>
<div id="t">
	<div id="m">
		<div class="l show"><div class="s t"></div></div>
		<div class="i"><div class="s t"></div></div>
		<div class="j"><div class="s t"></div></div>
		<div class="k"><div class="s t"></div></div>
		<div class="l"><div class="s t"></div></div>
		<div class="i">
			<div class="s v">
				<video class="v1" preload="true"></video>
				<video class="v2" preload="true"></video>
			</div>
		</div>
	</div>
	<div id="i"></div>
	<div class="s">T.H.C</div>
</div>
<audio id="a"></audio>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

function timer(fn, tick, current, offset) {
	current = current || 0
	offset = offset || 0
	return function(time) {
		if (time + offset > current + tick)
			fn(current += tick)
	}
}

function next(list) {
	list.index = (list.index || 0) + 1
	return list[list.index % list.length]
}

function loadSource(callback) {
	// TODO: load this from somewhere
	var srcs = { }
	'a/sound/mp3|v/video/mp4'.split('|').map(function(t) {
		return t.split('/')
	}).forEach(function(t) {
		srcs[ t[0] ] = '123456789'.split('').map(function(j){
			return 'http://www.ecymd.net/thcic/' + t[1] + '/cn/0000' + j + '.' + t[2]
		})
	})
	setTimeout(function() {
		callback(srcs)
	}, 0)
}

loadSource(function(srcs) {
	var timers = [ ],
		classes = 'ijkl'.split(''),

		audio = $('#a')[0],
		video = $('.v2')[0],

		gensokyo =
			{ c:'white', n:'GENSOKYO', h:'幻想鄉' },
		places = [
			{ c:'rgb(221, 156, 231)', n:'HAKUGYOKURO', h:'白玉楼' },
			{ c:'rgb( 75,   0, 130)', n:'EIENTEI', h:'永远亭' },
		]

	function showMask(time) {
		$('#i').text(time)
		$('#m').children().eq(time % 10).css('z-index', 2).addClass('show')
	}

	function playVideo(time) {
		var v1 = $('.v1'), v2 = $('.v2')

		v1.removeClass('v1').addClass('v2')
		v1[0].src = next(srcs.v)
		v1[0].play()

		v2.removeClass('v2').addClass('v1')
		v2[0].currentTime = 0
		v2[0].play()
	}

	function updateMask(time) {
		var place = places[Math.floor(Math.random() * places.length)]
		$('#m').children().removeClass(classes.join(' ')).each(function(i, e) {
			$(e).addClass(next(classes))
				.find('.t').html('<div>' +
					'<big>' + (499514 + time + i) + '</big><br />' +
					'<span>' + place.n + ' / ' + gensokyo.n + '</span><br />' +
					'<span>' + place.h + ' / ' + gensokyo.h + '</span>' +
				'</div>')
		})
		next(classes)
		$('.i, .k').css('color', place.c).css('background', gensokyo.c)
		$('.j, .l').css('color', gensokyo.c).css('background', place.c)
	}

	function resetMask(time) {
		var m = $('#m').children().last().css('z-index', 1)
			.siblings().removeClass('show').hide()
		setTimeout(function() { m.show() }, 1000)
	}

	function resetVideo(time) {
		$('#m').children().last().removeClass('show')
	}

	$(audio).on('loadstart', function(e) {
		timers = [
			timer(showMask,  1),
			timer(resetVideo, 10, -8),
			timer(playVideo, 10, -5),
			timer(updateMask, 10, -4),
			timer(resetMask, 10, -4),
		]
	})

	$(audio).on('ended', function(e) {
		audio.src = next(srcs.a)
		audio.load()
		setTimeout(function() {
			audio.play()
		}, 500)
	})

	/*
	$(window).on('orientationchange', function(e) {
		var tooWide = window.innerWidth * 480 > window.innerHeight * 640,
			width = tooWide ? window.innerHeight / 480 * 640 : window.innerWidth,
			height = tooWide ? window.innerHeight : window.innerWidth / 640 * 480
		$('#t, #m, .s, .v1, .v2').width(width).height(height)
	}).trigger('orientationchange')
	*/

	requestAnimationFrame(function update() {
		timers.forEach(function(fn) {
			fn(audio.currentTime + 0.2)
		})
		requestAnimationFrame(update)
	})

	updateMask(0)
	$('#t').hide()
	setTimeout(function(){ $('#t').show() }, 10)

	// go!
	video.src = next(srcs.v)
	video.play()
	audio.src = next(srcs.a)
	audio.play()
})

</script>
</body>
</html>
	<html>
	<head>
	<meta name="viewport" content="width=640,user-scalable=no" />
	<meta charset="utf8" />
	<style>
	html, body {
	background: #aaa;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	}
	#t, #m, .s, .v1, .v2 {
	width: 640px;
	height: 480px;
	}
	#t {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	}
	#i {
	z-index: 9;
	color: #333;
	padding: 3em 0.5em;
	}
	#m, #i {
	position: absolute;
	overflow: hidden;
	}
	.v {
	background: black;
	}
	.v1, .v2 {
	position: absolute;
	left: 0;
	}
	.v2 {
	visibility: hidden;
	}
	.s {
	display: table;
	}
	.s > * {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	}
	.s big {
	font-size: 500%;
	}
	.s span {
	font-size: 200%;
	}
	.i, .j, .k, .l {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	}
	.i {
	color: white;
	background: black;
	transition: width 0.5s;
	width: 0;
	}
	.i.show {
	width: 100%;
	}
	.j {
	color: black;
	background: white;
	transition: height 0.5s;
	height: 0;
	}
	.j.show {
	height: 100%;
	}
	.k {
	color: white;
	background: black;
	transition: transform 0.5s;
	transform: translateX(100%);
	}
	.k.show {
	transform: none;
	}
	.k .s {
	transition: transform 0.5s;
	transform: translateX(-100%);
	}
	.k.show .s {
	transform: none;
	}
	.l {
	color: black;
	background: white;
	transition: transform 0.5s;
	transform: translateY(100%);
	}
	.l.show {
	transform: none;
	}
	.l .s {
	transition: transform 0.5s;
	transform: translateY(-100%);
	}
	.l.show .s {
	transform: none;
	}
	</style>
	</head>
	<body>
	<div id="t">
	<div id="m">
	<div class="l show"><div class="s t"></div></div>
	<div class="i"><div class="s t"></div></div>
	<div class="j"><div class="s t"></div></div>
	<div class="k"><div class="s t"></div></div>
	<div class="l"><div class="s t"></div></div>
	<div class="i">
	<div class="s v">
	<video class="v1" preload="true"></video>
	<video class="v2" preload="true"></video>
	</div>
	</div>
	</div>
	<div id="i"></div>
	<div class="s">T.H.C</div>
	</div>
	<audio id="a"></audio>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>

	function timer(fn, tick, current, offset) {
	current = current \|\| 0
	offset = offset \|\| 0
	return function(time) {
	if (time + offset > current + tick)
	fn(current += tick)
	}
	}

	function next(list) {
	list.index = (list.index \|\| 0) + 1
	return list[list.index % list.length]
	}

	function loadSource(callback) {
	// TODO: load this from somewhere
	var srcs = { }
	'a/sound/mp3\|v/video/mp4'.split('\|').map(function(t) {
	return t.split('/')
	}).forEach(function(t) {
	srcs[ t[0] ] = '123456789'.split('').map(function(j){
	return 'http://www.ecymd.net/thcic/' + t[1] + '/cn/0000' + j + '.' + t[2]
	})
	})
	setTimeout(function() {
	callback(srcs)
	}, 0)
	}

	loadSource(function(srcs) {
	var timers = [ ],
	classes = 'ijkl'.split(''),

	audio = $('#a')[0],
	video = $('.v2')[0],

	gensokyo =
	{ c:'white', n:'GENSOKYO', h:'幻想鄉' },
	places = [
	{ c:'rgb(221, 156, 231)', n:'HAKUGYOKURO', h:'白玉楼' },
	{ c:'rgb( 75, 0, 130)', n:'EIENTEI', h:'永远亭' },
	]

	function showMask(time) {
	$('#i').text(time)
	$('#m').children().eq(time % 10).css('z-index', 2).addClass('show')
	}

	function playVideo(time) {
	var v1 = $('.v1'), v2 = $('.v2')

	v1.removeClass('v1').addClass('v2')
	v1[0].src = next(srcs.v)
	v1[0].play()

	v2.removeClass('v2').addClass('v1')
	v2[0].currentTime = 0
	v2[0].play()
	}

	function updateMask(time) {
	var place = places[Math.floor(Math.random() * places.length)]
	$('#m').children().removeClass(classes.join(' ')).each(function(i, e) {
	$(e).addClass(next(classes))
	.find('.t').html('<div>' +
	'<big>' + (499514 + time + i) + '</big><br />' +
	'<span>' + place.n + ' / ' + gensokyo.n + '</span><br />' +
	'<span>' + place.h + ' / ' + gensokyo.h + '</span>' +
	'</div>')
	})
	next(classes)
	$('.i, .k').css('color', place.c).css('background', gensokyo.c)
	$('.j, .l').css('color', gensokyo.c).css('background', place.c)
	}

	function resetMask(time) {
	var m = $('#m').children().last().css('z-index', 1)
	.siblings().removeClass('show').hide()
	setTimeout(function() { m.show() }, 1000)
	}

	function resetVideo(time) {
	$('#m').children().last().removeClass('show')
	}

	$(audio).on('loadstart', function(e) {
	timers = [
	timer(showMask, 1),
	timer(resetVideo, 10, -8),
	timer(playVideo, 10, -5),
	timer(updateMask, 10, -4),
	timer(resetMask, 10, -4),
	]
	})

	$(audio).on('ended', function(e) {
	audio.src = next(srcs.a)
	audio.load()
	setTimeout(function() {
	audio.play()
	}, 500)
	})

	/*
	$(window).on('orientationchange', function(e) {
	var tooWide = window.innerWidth * 480 > window.innerHeight * 640,
	width = tooWide ? window.innerHeight / 480 * 640 : window.innerWidth,
	height = tooWide ? window.innerHeight : window.innerWidth / 640 * 480
	$('#t, #m, .s, .v1, .v2').width(width).height(height)
	}).trigger('orientationchange')
	*/

	requestAnimationFrame(function update() {
	timers.forEach(function(fn) {
	fn(audio.currentTime + 0.2)
	})
	requestAnimationFrame(update)
	})

	updateMask(0)
	$('#t').hide()
	setTimeout(function(){ $('#t').show() }, 10)

	// go!
	video.src = next(srcs.v)
	video.play()
	audio.src = next(srcs.a)
	audio.play()
	})

	</script>
	</body>
	</html>