hisasann/HelloWorld2.html

## HelloWorld2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>addCommand - HelloWorld2</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	<style type="text/css" media="screen">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			overflow: hidden;
		}
		#frame {
			width: 100%;
			height: 100%;
		}
		#frame div {
			text-shadow: 0 0 4px white,
						0 -5px 4px #FFFF33,
						2px -10px 6px #FFDD33,
						-2px -15px 11px #FF8800,
						2px -25px 18px #FF2200;
		}
	</style>
	<script src="jquery.js"></script>
	<script src="easing.js"></script>
	<script src="addCommand.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			var frame = $("#frame"),
				img,
				left = Math.floor(($(window).width() - $("#text").width()) / 2),
				top  = Math.floor(($(window).height() - $("#text").height()) / 2);

			for (var i=0; i < 20; i++) {
				img = $("<div/>")
					.html("hisasann")
					.css({
						position: "absolute",
						top: Math.cos(i) * $(window).height() + top + "px",
						left: Math.sin(i) * $(window).width() + left + "px",
						fontSize: "40px"
					})
					.appendTo(frame);

				jQuery.data(img[0], "position", {
						top: Math.cos(i) * $(window).height() + top,
						left: Math.sin(i) * $(window).width() + left,
						index: i
					});
			};

			$.addCommand.define();
			frame.find("div").each(function(index, elem) {
				var _this = this;
				addCommand(
					Prop($(this), { opacity: 0 }),
					DoTweener($(this), {
							top: top, left: left, opacity: 1
						}, 3000, "easeInOutCirc", function() {
						}, 100
					),
					DoTweener($(this), {
							top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
						}, 1500, "easeInOutBack", function() {
						}, 100 * index
					),
					function() {
						$(_this).html("hisasann");
					},
					DoTweener($(this), {
							top: top, left: left, opacity: 1
						}, 3000, "easeInOutElastic", function() {
						}, 100
					),
					function() {
						$(_this).html("HelloWorld");
					},
					DoTweener($(this), {
							top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
						}, 1500, "easeInOutBounce", function() {
						}, 0
					),
					function() {
						$(_this).html("Bye!!");
					},
					DoTweener($(this), {
							top: top, left: left, opacity: 1
						}, 0, "easeInOutCirc", function() {
						}, 0
					),
					DoTweener($(this), {
							top: top, left: left, opacity: 0
						}, 1000, "easeInOutCirc", function() {
						}, 0
					)
				);
			});
		});
	</script>
</head>
<body>

	<div id="frame">

	</div>
	<div id="text" style="display:none;font-size: 40px;">HelloWorld</div>

</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>addCommand - HelloWorld2</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	<style type="text/css" media="screen">
	* {
	margin: 0px;
	padding: 0px;
	}
	body {
	overflow: hidden;
	}
	#frame {
	width: 100%;
	height: 100%;
	}
	#frame div {
	text-shadow: 0 0 4px white,
	0 -5px 4px #FFFF33,
	2px -10px 6px #FFDD33,
	-2px -15px 11px #FF8800,
	2px -25px 18px #FF2200;
	}
	</style>
	<script src="jquery.js"></script>
	<script src="easing.js"></script>
	<script src="addCommand.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
	var frame = $("#frame"),
	img,
	left = Math.floor(($(window).width() - $("#text").width()) / 2),
	top = Math.floor(($(window).height() - $("#text").height()) / 2);

	for (var i=0; i < 20; i++) {
	img = $("<div/>")
	.html("hisasann")
	.css({
	position: "absolute",
	top: Math.cos(i) * $(window).height() + top + "px",
	left: Math.sin(i) * $(window).width() + left + "px",
	fontSize: "40px"
	})
	.appendTo(frame);

	jQuery.data(img[0], "position", {
	top: Math.cos(i) * $(window).height() + top,
	left: Math.sin(i) * $(window).width() + left,
	index: i
	});
	};

	$.addCommand.define();
	frame.find("div").each(function(index, elem) {
	var _this = this;
	addCommand(
	Prop($(this), { opacity: 0 }),
	DoTweener($(this), {
	top: top, left: left, opacity: 1
	}, 3000, "easeInOutCirc", function() {
	}, 100
	),
	DoTweener($(this), {
	top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
	}, 1500, "easeInOutBack", function() {
	}, 100 * index
	),
	function() {
	$(_this).html("hisasann");
	},
	DoTweener($(this), {
	top: top, left: left, opacity: 1
	}, 3000, "easeInOutElastic", function() {
	}, 100
	),
	function() {
	$(_this).html("HelloWorld");
	},
	DoTweener($(this), {
	top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
	}, 1500, "easeInOutBounce", function() {
	}, 0
	),
	function() {
	$(_this).html("Bye!!");
	},
	DoTweener($(this), {
	top: top, left: left, opacity: 1
	}, 0, "easeInOutCirc", function() {
	}, 0
	),
	DoTweener($(this), {
	top: top, left: left, opacity: 0
	}, 1000, "easeInOutCirc", function() {
	}, 0
	)
	);
	});
	});
	</script>
	</head>
	<body>

	<div id="frame">

	</div>
	<div id="text" style="display:none;font-size: 40px;">HelloWorld</div>

	</body>
	</html>