Skip to content

Instantly share code, notes, and snippets.

@hisasann

hisasann/HellWorld.html

Created October 3, 2009 07:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hisasann/200472 to your computer and use it in GitHub Desktop.
Save hisasann/200472 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HellWorld.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 - HelloWorld</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;
}
</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() - $("#image").width()) / 2),
top = Math.floor(($(window).height() - $("#image").height()) / 2);
for (var i=0; i < 20; i++) {
img = $("<img>")
.attr("src", "HelloWorld.png")
.css({
position: "absolute",
top: Math.cos(i) * $(window).height() + top + "px",
left: Math.sin(i) * $(window).width() + left + "px"
})
.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("img").each(function(index, elem) {
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
),
DoTweener($(this), {
top: top, left: left, opacity: 1
}, 3000, "easeInOutElastic", function() {
}, 100
),
DoTweener($(this), {
top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
}, 1500, "easeInOutBounce", function() {
}, 0
),
DoTweener($(this), {
top: top, left: left, opacity: 1
}, 0, "easeInOutCirc", function() {
}, 0
)
);
});
});
</script>
</head>
<body>
<div id="frame">
</div>
<img src="HelloWorld.png" id="image" style="display:none;" width="318px" height="99">
</body>
</html>
@iruka743
Copy link

thank you ( ´ ▽ ` )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment