https://www.callthefcc.com/js/rain.js

1window.addEvent('domready', function() {
2	var pre	=	new Image();
3	pre.src	=	'images/heart.png';
4
5	start_rain.delay(200);
6});
7
8start_rain = function()
9{
10	var _rain	=	new rain('rain', 'images/heart.png', .4, 100);
11}
12
13var rain	=	new Class({
14	container:	null,
15	coords:		null,
16
17	drops:		[],
18	pool:       [],
19
20	options: {
21		image_url:	null,
22		delay:		null,
23		amount:		.2,
24		speed:		7000
25	},
26
27	initialize: function(container, image_url, amount, delay)
28	{
29		this.container	=	$(container);
30		if(!this.container) return false;
31
32		var delay	=	parseInt(delay) >=0 ? delay : 0;
33		var amount	=	parseFloat(amount) < 0 || parseFloat(amount) > 1 ? .2 : amount;
34
35		this.options.image_url	=	image_url;
36		this.options.delay		=	delay;
37		this.options.amount		=	amount;
38
39		this.rain();
40	},
41
42	rain: function()
43	{
44		if(Math.random() < this.options.amount)
45		{
46			this.add_drop();
47		}
48
49		var now = Date.now();
50		for(var i = this.drops.length - 1; i >= 0; i--)
51		{
52			if(this.drops[i].expiration < now)
53			{
54				this.remove_drop(i);
55			}
56		}
57
58		this.rain.delay(this.options.delay, this);
59	},
60
61	add_drop: function()
62	{
63		var img		=	this.pool.pop() || new Image();
64		img.src		=	this.options.image_url;
65
66		img.savedWidth  = img.savedWidth || img.width;
67		img.savedHeight = img.savedHeight || img.height;
68
69		var width	=	img.savedWidth;
70		var height	=	img.savedHeight;
71		img.prop	=	width / height;
72
73		img.height	=	parseInt(((Math.random() * .8) + .2) * height);
74		img.width	=	img.height * img.prop;
75
76		img.size	=	parseInt(100 * ((img.width / width)));
77		img.inv		=	parseInt(100 * (1 - (img.width / width)));
78
79		var bottom	=	-(img.height + 10);
80
81		this.coords	=	this.container.getCoordinates();
82
83		var left	=	Math.floor(Math.random() * (this.coords.width - img.width));
84		if(left + img.width > this.coords.right)
85		{
86			left	=	this.coords.right - img.width;
87		}
88
89		img.setStyles({
90			left:	left + 'px',
91			transform: 'translate(0, ' + this.coords.height + 'px)',
92			webkitTransform: 'translate(0, ' + this.coords.height + 'px)',
93			zIndex:	img.size
94		});
95
96		img.inject(this.container, 'bottom');
97
98		var duration	=	this.options.speed;
99		duration		+=	(img.inv / 100) * 4 * duration;
100
101		img.style.transition = 'all ' + (duration / 1000) + 's linear';
102		img.style.webkitTransition = 'all ' + (duration / 1000) + 's linear';
103		this.reflow(img);
104		img.style.transform  = 'translate(0, -' + img.size + 'px)';
105		img.style.webkitTransform  = 'translate(0, -' + img.size + 'px)';
106		img.expiration = Date.now() + duration + 100;
107
108		this.drops.push(img);
109	},
110
111	reflow: function(node)
112	{
113		return node.offsetHeight;
114	},
115
116	remove_drop: function(index)
117	{
118		this.pool.push(this.drops[index]);
119		this.drops[index].destroy();
120		this.drops.splice(index, 1);
121	}
122});