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
107
108
109
|
<!doctype html>
<html>
<head>
<title>PARTICLES</title>
<style type="text/css">
html,body{height: 100%;width:100%; overflow:hidden;}
#container
{
position: fixed;
top: 0;
left: 0;
height: 100%;width:100%;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, rgb(43,42,40)),
color-stop(0.62, rgb(0,0,0))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,42,40) 23%,
rgb(0,0,0) 62%
);
}
.point
{
display: block;
position: absolute;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
function Point (x,y,color)
{
var width = Math.floor( 10 * Math.random() + 5 )
var dx = (Math.random() * 2 - 1) * 20
var dy = (Math.random() * 2 - 1) * 20
var div = document.createElement('div')
div.className = "point"
div.style.width = width+"px"
div.style.height = width+"px"
div.style.background = color
div.style.left = x+"px"
div.style.top = y+"px"
document.getElementById("container").appendChild(div)
this.update = function ()
{
if (! div)
return false
width -= 1
if (width === 1)
{
// document.getElementById("container").removeChild(div)
div.style.background = choice(Particles.dead_colors)
div = false
}
else
{
x += dx
y += dy
dy += 2
div.style.width = width+"px"
div.style.height = width+"px"
div.style.left = x+"px"
div.style.top = y+"px"
}
}
}
function choice(list){return list[ Math.floor( Math.random() * list.length )]}
var Particles =
{
list: [],
count: 20,
delay: 90,
colors: ["#f33","#ff0","#3df","#33f","#83b","#d3d"],
dead_colors: ["#000","#080808","#111","#181818","#222","#333","#444","#555","#666"],
update: function ()
{
var update_count = 0
for (var i = 0; i < Particles.list.length; i++)
{
if (! Particles.list[i].update())
update_count += 1
}
if (update_count === 0)
Particles.list = []
},
click: function (e)
{
console.log("CLICKED "+e.pageX+ " "+ e.pageY)
count = Particles.count * Math.random() + Particles.count/2
for (var i = 0; i < count; i++)
Particles.list.push ( new Point (e.pageX, e.pageY, choice(Particles.colors) ) )
},
init: function ()
{
$("#container").bind("click", Particles.click)
setInterval(Particles.update, Particles.delay)
},
}
Particles.init()
</script>
</html>
|
