function Bubble(x, y, x_jitter, y_jitter) {
this.x = 0;
this.y = 0;
this.x_jitter = 0;
this.y_jitter = 0;
this.alpha = 1.0;
this.size = 1.0;
this.counter = 0;
this.object = {};
this.timer = 0;
this.constructor.call(this, x, y, x_jitter, y_jitter);
}
(function(){
Bubble.prototype.updatePosition = function() {
this.object.style.left = this.x + "px";
this.object.style.top = this.y + "px";
if( this.y < 400 )
{
var bubble = this;
$(this.object).fadeOut(1000, function(){
bubble.timer = clearTimeout(bubble.timer);
$(bubble.object).remove();
});
}
};
Bubble.prototype.animate = function() {
var self = this;
return function(){
self.counter += Math.floor(Math.random() * 1.0) + 0.3;
self.y -= self.speed;
var x = Math.sin(self.counter);
x = Math.floor(x * (self.speed - 10));
self.x = self.x + x;
self.speed += 0.25;
self.updatePosition();
};
};
Bubble.prototype.draw = function() {
this.object = document.createElement('div');
this.object.innerHTML = "bubble";
this.object.style.position = "absolute";
this.object.style.left = this.x + "px";
this.object.style.top = this.y + "px";
this.object.style.width = this.size + "px";
this.object.style.height = this.size + "px";
this.object.className = "bubble";
this.object.style.zIndex = "9999";
};
Bubble.prototype.constructor = function(x, y, x_jitter, y_jitter) {
this.x = x + (Math.floor(Math.random() * x_jitter) - x_jitter);
this.y = y + (Math.floor(Math.random() * y_jitter) - y_jitter);
this.x_jitter = x_jitter;
this.y_jitter = y_jitter;
this.size = Math.floor(Math.random() * 10) + 3;
this.distance = Math.floor(Math.random() * 20) + 10;
this.speed = Math.floor(Math.random() * 10) + 5;
this.draw();
this.timer = setInterval( this.animate.call(this), 50 );
};
Bubble.prototype.toString = function() {
return this.object;
};
})();
for(var i = 0; i < 25; i++) {
var bubble = new Bubble(300, 1000, 100, 100);
document.body.appendChild(bubble.object);
}
<html>
<head>
<title>Test</title>
</head>
<body>
</body>
</html>