Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment