-
Notifications
You must be signed in to change notification settings - Fork 1
/
rain.js
72 lines (63 loc) · 2.75 KB
/
rain.js
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
var container = document.getElementById('animate');
var emoji = ['💸', '💎', '💵'];
var circles = [];
for (var i = 0; i < 15; i++) {
addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
}
function addCircle(delay, range, color) {
setTimeout(function() {
var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
x: -0.15 + Math.random() * 0.3,
// SPEED
y: 7 + Math.random() * 1
}, range);
circles.push(c);
}, delay);
}
function Circle(x, y, c, v, range) {
var _this = this;
this.x = x;
this.y = y;
this.color = c;
this.v = v;
this.range = range;
this.element = document.createElement('span');
/*this.element.style.display = 'block';*/
this.element.style.opacity = 0;
this.element.style.position = 'absolute';
this.element.style.fontSize = '56px';
this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
this.element.innerHTML = c;
container.appendChild(this.element);
this.update = function() {
if (_this.y > 1500) {
_this.y = 80 + Math.random() * 4;
_this.x = _this.range[0] + Math.random() * _this.range[1];
}
_this.y += _this.v.y;
_this.x += _this.v.x;
this.element.style.opacity = 1;
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
};
}
export function animate() {
for (var i in circles) {
circles[i].update();
}
requestAnimationFrame(animate);
}