hisasann/space.html

## space.html
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<title>space</title>
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="easing.js" type="text/javascript" charset="utf-8"></script>
	<script src="jsdeferred.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
		$(function() {
			Deferred.define();
			var wrap = $("#wrap"),
				winHeight = $(window).height(),
				winWidth = $(window).width(),
				centerTop = $(window).height() / 2,
				centerLeft = $(window).width() / 2;
			wrap
				.css({
					height: winHeight,
					width: winWidth
				});

			(function() {
				var callee = arguments.callee;

				var elem = null;
				next(function() {
					// create element
					var RADIUS = 120;
					elem = $("<canvas>", {
						css: {
							opacity: 0.1,
							position: "absolute",
							top: Math.random() * winHeight,
							left: Math.random() * winWidth
						}
					})
					.attr({
						width: RADIUS * 2,
						height: RADIUS * 2,
					})
					.appendTo("#wrap");

					var context = elem[0].getContext('2d');
					context.beginPath();
					context.fillStyle = ["rgb(", getRGB(), ",", getRGB(), ",", getRGB(), ")"].join("");
					context.arc( RADIUS, RADIUS, RADIUS, 0, Math.PI * 2, false);
					context.fill();
				}).
				next(function() {
					// animation
					return (function() {
						var d = new Deferred();
						elem
							.animate({
								top: centerTop,
								left: centerLeft,
								height: 0,
								width: 0,
								opacity: 1
							},{
								duration: 3000,
								specialEasing: {
									height: 'easeOutBack',
									width: 'easeOutBack'
								},
								complete: function() {
									d.call();
								}
							});

						return d;
					})();
				}).
				next(function() {
					// remove element
					elem.remove();
				});

				setTimeout(function() {
					callee();
				}, 100);
			})();

			function getColor() {
				return "00" + Math.floor(Math.random() * 0xFFFF).toString(16);
			}

			function getRGB() {
				return Math.floor(Math.random() * 255);
			}

			(function() {
				var callee = arguments.callee;

				wait(3.5).
				next(function() {
					wrap
						.removeClass("radial1")
						.addClass("radial2");
				}).
				wait(3.5).
				next(function() {
					wrap
						.removeClass("radial2")
						.addClass("radial1");
				}).
				next(function() {
					setTimeout(function() {
						callee();
					}, 100);
				});
			})();

			// audio play
			$("#audio").get(0).play();
		});
	</script>
	<style type="text/css" media="screen">
		* {
			margin: 0px;
			padding: 0px;
		}

		body {
			overflow: hidden;
		}

		.radial1 {
			background: -moz-radial-gradient(red, yellow, #1E90FF);
			background: -moz-radial-gradient(#FF0000 5%, #FFFF00 30%, #333333 50%);
			background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff));
		}

		.radial2 {
			background: -moz-radial-gradient(red, yellow, #1E90FF);
			background: -moz-radial-gradient(#FF3535 6%, #F5FF35 30%, #333333 50%);
			background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff));
		}
	</style>
</head>
<body>

	<div id="wrap" class="radial1"></div>
	<audio id="audio" src="James_Holden_-_A_Break_In_The_Clouds.ogg">
		Your browser does not support the <code>audio</code> element.
	</audio>

</body>
</html>
	<!DOCTYPE HTML>
	<html lang="ru-RU">
	<head>
	<meta charset="UTF-8">
	<title>space</title>
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="easing.js" type="text/javascript" charset="utf-8"></script>
	<script src="jsdeferred.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
	$(function() {
	Deferred.define();
	var wrap = $("#wrap"),
	winHeight = $(window).height(),
	winWidth = $(window).width(),
	centerTop = $(window).height() / 2,
	centerLeft = $(window).width() / 2;
	wrap
	.css({
	height: winHeight,
	width: winWidth
	});

	(function() {
	var callee = arguments.callee;

	var elem = null;
	next(function() {
	// create element
	var RADIUS = 120;
	elem = $("<canvas>", {
	css: {
	opacity: 0.1,
	position: "absolute",
	top: Math.random() * winHeight,
	left: Math.random() * winWidth
	}
	})
	.attr({
	width: RADIUS * 2,
	height: RADIUS * 2,
	})
	.appendTo("#wrap");

	var context = elem[0].getContext('2d');
	context.beginPath();
	context.fillStyle = ["rgb(", getRGB(), ",", getRGB(), ",", getRGB(), ")"].join("");
	context.arc( RADIUS, RADIUS, RADIUS, 0, Math.PI * 2, false);
	context.fill();
	}).
	next(function() {
	// animation
	return (function() {
	var d = new Deferred();
	elem
	.animate({
	top: centerTop,
	left: centerLeft,
	height: 0,
	width: 0,
	opacity: 1
	},{
	duration: 3000,
	specialEasing: {
	height: 'easeOutBack',
	width: 'easeOutBack'
	},
	complete: function() {
	d.call();
	}
	});

	return d;
	})();
	}).
	next(function() {
	// remove element
	elem.remove();
	});

	setTimeout(function() {
	callee();
	}, 100);
	})();

	function getColor() {
	return "00" + Math.floor(Math.random() * 0xFFFF).toString(16);
	}

	function getRGB() {
	return Math.floor(Math.random() * 255);
	}

	(function() {
	var callee = arguments.callee;

	wait(3.5).
	next(function() {
	wrap
	.removeClass("radial1")
	.addClass("radial2");
	}).
	wait(3.5).
	next(function() {
	wrap
	.removeClass("radial2")
	.addClass("radial1");
	}).
	next(function() {
	setTimeout(function() {
	callee();
	}, 100);
	});
	})();

	// audio play
	$("#audio").get(0).play();
	});
	</script>
	<style type="text/css" media="screen">
	* {
	margin: 0px;
	padding: 0px;
	}

	body {
	overflow: hidden;
	}

	.radial1 {
	background: -moz-radial-gradient(red, yellow, #1E90FF);
	background: -moz-radial-gradient(#FF0000 5%, #FFFF00 30%, #333333 50%);
	background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff));
	}

	.radial2 {
	background: -moz-radial-gradient(red, yellow, #1E90FF);
	background: -moz-radial-gradient(#FF3535 6%, #F5FF35 30%, #333333 50%);
	background: -webkit-gradient(linear, left top, left bottom, from(#66ff00), color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff), to(#00aaff));
	}
	</style>
	</head>
	<body>

	<div id="wrap" class="radial1"></div>
	<audio id="audio" src="James_Holden_-_A_Break_In_The_Clouds.ogg">
	Your browser does not support the <code>audio</code> element.
	</audio>

	</body>
	</html>