hisasann/jTypography.html

## jTypography.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>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	<style type="text/css" media="screen">
		* {
			margin: 0px;
			padding: 0px;
		}

		html {
			overflow: hidden;
		}

		#jsonframe {
			font-family:Times New Roman,Times,Georgia,erif;
			position: absolute;
			top: 50px;
			left: 10px;
			padding: 10px;
			overflow: auto;
		}

		#jsonframe span{
			padding: 3px;
		}

		#typoZone {
			margin: 10px;
		}

		#typoZone #typoTxt {
			width: 400px;
		}
	</style>
	<script src="jquery.js"></script>
	<script src="easing.js"></script>
	<script type="text/javascript" charset="utf-8">
		(function($) {
			var options = {};
			$.jTypography = function(opts) {
				$.extend(options, opts);
				var typos = options.typography.split("@"),
					id = options.targetId
					allCount = 0
					animeCount = 0;

				$(id).css({
					width: $(window).width(),
					height: $(window).height()
				});

				// clear
				$(id).html("");

				for (var i=0,len=typos.length; i < len; ++i) {
					delay(i, function(index) {
						var typo = typos[index] + "@";
						for (var j=0,len2=typo.length; j < len2; ++j) {
							if(typo[j] == "@") {
								$("<br>")
									.appendTo(id);
							} else {
								allCount++;
								$("<span>")
									.html(typo[j])
									.css({
										marginLeft: 200 + "px",
										marginTop: $(window).height() + 100 + "px",
										fontSize: getRandom(1500) + "px",
										opacity: 0.1,
										color: getColor()
									})
									.appendTo(id)
									.animate({
												marginLeft: "0px",
												fontSize: getRandom(150) + "px",
												opacity: 1
											}, 1000 + (j * 100), options.easing, function() {
												animeCount++;
											});
							}
						};
					}, 700 * i);
				}
				var interval = setInterval(function() {
					if(allCount == animeCount) {
						$(id).animate({
								top: "-=100px"
							}, 300, "easeInCubic", function() {
								$(this).animate({
									top: "50px"
								}, 300, "easeOutBounce");
							});
						clearInterval(interval);
						interval = null;
					}
				}, 500);
			};

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

			function delay(index, fn, delay) {
				var i = index;
				setTimeout(function() {
					fn(i);
				}, delay);
			}

			function getRandom(rand){
				return Math.floor(Math.random() * rand);
			}

			$.jTypography.remove = function() {
				$(options.targetId).find("span").each(function(index) {
					$(this).animate({marginLeft: $(window).width() + "px"}, 100 * index, options.easing, function() {
					});
				});
			}
		})(jQuery);
		$(function() {
			$('#typoBtn')
				.click(function() {
					jQuery.jTypography({
						targetId: "#jsonframe",
						typography: $("#typoTxt").val(),
						easing: "easeOutCubic"
					})
				});
			$("#removeBtn")
				.click(function() {
					jQuery.jTypography.remove();
				});
		})
	</script>
</head>
<body>

<div id="typoZone">
	<input type="text" name="name" value="Hello@My name is hisasann.@What's you are name?@Thank you!!" id="typoTxt" />
	（@マークで改行）
	<input type="button" name="name" value="Let's Typography" id="typoBtn" />
	<input type="button" name="name" value="Remove" id="removeBtn" />
</div>
<div id="jsonframe">

</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>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="">
	<style type="text/css" media="screen">
	* {
	margin: 0px;
	padding: 0px;
	}

	html {
	overflow: hidden;
	}

	#jsonframe {
	font-family:Times New Roman,Times,Georgia,erif;
	position: absolute;
	top: 50px;
	left: 10px;
	padding: 10px;
	overflow: auto;
	}

	#jsonframe span{
	padding: 3px;
	}

	#typoZone {
	margin: 10px;
	}

	#typoZone #typoTxt {
	width: 400px;
	}
	</style>
	<script src="jquery.js"></script>
	<script src="easing.js"></script>
	<script type="text/javascript" charset="utf-8">
	(function($) {
	var options = {};
	$.jTypography = function(opts) {
	$.extend(options, opts);
	var typos = options.typography.split("@"),
	id = options.targetId
	allCount = 0
	animeCount = 0;

	$(id).css({
	width: $(window).width(),
	height: $(window).height()
	});

	// clear
	$(id).html("");

	for (var i=0,len=typos.length; i < len; ++i) {
	delay(i, function(index) {
	var typo = typos[index] + "@";
	for (var j=0,len2=typo.length; j < len2; ++j) {
	if(typo[j] == "@") {
	$("<br>")
	.appendTo(id);
	} else {
	allCount++;
	$("<span>")
	.html(typo[j])
	.css({
	marginLeft: 200 + "px",
	marginTop: $(window).height() + 100 + "px",
	fontSize: getRandom(1500) + "px",
	opacity: 0.1,
	color: getColor()
	})
	.appendTo(id)
	.animate({
	marginLeft: "0px",
	fontSize: getRandom(150) + "px",
	opacity: 1
	}, 1000 + (j * 100), options.easing, function() {
	animeCount++;
	});
	}
	};
	}, 700 * i);
	}
	var interval = setInterval(function() {
	if(allCount == animeCount) {
	$(id).animate({
	top: "-=100px"
	}, 300, "easeInCubic", function() {
	$(this).animate({
	top: "50px"
	}, 300, "easeOutBounce");
	});
	clearInterval(interval);
	interval = null;
	}
	}, 500);
	};

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

	function delay(index, fn, delay) {
	var i = index;
	setTimeout(function() {
	fn(i);
	}, delay);
	}

	function getRandom(rand){
	return Math.floor(Math.random() * rand);
	}

	$.jTypography.remove = function() {
	$(options.targetId).find("span").each(function(index) {
	$(this).animate({marginLeft: $(window).width() + "px"}, 100 * index, options.easing, function() {
	});
	});
	}
	})(jQuery);
	$(function() {
	$('#typoBtn')
	.click(function() {
	jQuery.jTypography({
	targetId: "#jsonframe",
	typography: $("#typoTxt").val(),
	easing: "easeOutCubic"
	})
	});
	$("#removeBtn")
	.click(function() {
	jQuery.jTypography.remove();
	});
	})
	</script>
	</head>
	<body>

	<div id="typoZone">
	<input type="text" name="name" value="Hello@My name is hisasann.@What's you are name?@Thank you!!" id="typoTxt" />
	（@マークで改行）
	<input type="button" name="name" value="Let's Typography" id="typoBtn" />
	<input type="button" name="name" value="Remove" id="removeBtn" />
	</div>
	<div id="jsonframe">

	</div>

	</body>
	</html>