Create a gist now

Instantly share code, notes, and snippets.

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