/
spread.html
106 lines (98 loc) · 2.61 KB
/
spread.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8"></meta>
<script src="../lib/jquery-1.2.js"></script>
<script src="../lib/Ebisu.js"></script>
<title>Spread</title>
<style type="text/css">
body {
background:black;
}
.fire {
width:20px;
height:20px;
position:absolute;
bottom:0;
right:0;
background:#fff;
color:red;
}
a#fire {
float:right;
font-size:24pt;
color:white;
}
</style>
</head>
<body>
<a id="fire" href="#">Click Here to start</a>
<div id="sky"></div>
<script type="text/javascript">
var gwidth = $(window).width() - 30;
var gheight = $(window).height() - 30;
var total = 1800;
for(var i = 0;i < total; i++) {
$("<div class='fire'> </div>").appendTo("#sky");
}
function texture(i, power) {
var m = Math.pow(-1, i) * i;
var left = gwidth/2 + m * Math.pow(Math.sin(i), power) % gwidth/2 ;
var top = gheight/2 + m * Math.pow(Math.cos(i), power) % gheight/2 ;
return {'left': left, 'top': top }
}
Ebisu("fire").to('div.fire').attach(
function() {
var power = (Math.random() * 10 | 0);
$("#fire").append("<br>type " + power);
this.each(
function(i) {
var c = texture(i, power);
var self = this;
setTimeout(
function() {
$(self).animate(
{
'left': c.left,
'top': c.top,
'width': 2, 'height': 2
},
5000
)
},
i * 100
);
}
);
}
);
Ebisu("unfire").to('div.fire').attach(function() {
var total = $("div.fire").size();
$("div.fire")
.css({width:20, height:20})
.filter(function(i) { return i % 4 == 0 })
.css({'left': 0, 'top': 0})
.end()
.filter(function(i) { return i % 4 == 1 })
.css({ 'left': gwidth, 'top': gheight })
.end()
.filter(function(i) { return i % 4 == 2 })
.css({ 'left': 0, 'top': gheight })
.end()
.filter(function(i) { return i % 4 == 3 })
.css({ 'left': gwidth, 'top': 0 })
.end()
});
var do_spread = function() {
$("#fire").unbind("click").click(undo_spread).text("Click Here To Revert");
Ebisu("fire").trigger();
};
var undo_spread = function() {
$("#fire").unbind("click").click(do_spread).text("Click Here To Start");
Ebisu("unfire").trigger();
};
$(function() {
undo_spread();
});
</script>
</body>
</html>