2011-09-15 23:39:34 +02:00
|
|
|
/* http://paulirish.com/2011/requestanimationframe-for-smart-animating/ */
|
|
|
|
window.requestAnimFrame = (function(){
|
|
|
|
return window.requestAnimationFrame ||
|
|
|
|
window.webkitRequestAnimationFrame ||
|
|
|
|
window.mozRequestAnimationFrame ||
|
|
|
|
window.oRequestAnimationFrame ||
|
|
|
|
window.msRequestAnimationFrame ||
|
|
|
|
function(/* function */ callback, /* DOMElement */ element){
|
|
|
|
window.setTimeout(callback, 1000 / 20);
|
|
|
|
};
|
|
|
|
})();
|
|
|
|
|
2011-09-16 02:11:18 +02:00
|
|
|
var funEnabled = false;
|
2011-09-15 23:39:34 +02:00
|
|
|
|
2011-09-16 00:50:59 +02:00
|
|
|
function now() {
|
|
|
|
return new Date().getTime();
|
|
|
|
}
|
|
|
|
|
2011-09-15 23:55:35 +02:00
|
|
|
function Flash(x, y) {
|
|
|
|
this.el = $('<img class="backgroundflash" src="images/flash.png"/>');
|
|
|
|
this.el.css('left', (x-10)+'px');
|
|
|
|
this.el.css('top', y+'px');
|
|
|
|
$('body').append(this.el);
|
|
|
|
|
|
|
|
var that = this;
|
|
|
|
this.el.fadeOut(250, function() {
|
|
|
|
that.el.detach();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2011-09-16 00:50:59 +02:00
|
|
|
function Raindrop(x, y, speedX) {
|
|
|
|
this.lastUpdate = now();
|
|
|
|
this.fadeUntil = now() + this.ttl;
|
|
|
|
this.x = x;
|
|
|
|
this.y = y;
|
|
|
|
this.speedX = speedX;
|
|
|
|
this.speedY = 0;
|
|
|
|
|
|
|
|
this.el = $('<p class="backgroundraindrop"></p>');
|
|
|
|
this.el.text(''+Math.floor(Math.random() * 2));
|
2011-09-17 02:12:12 +02:00
|
|
|
var rotation = 45 - (Math.random() * 90);
|
2011-09-16 18:31:43 +02:00
|
|
|
this.el.css('-webkit-transform', 'rotate('+rotation+'deg)');
|
|
|
|
this.el.css('-moz-transform', 'rotate('+rotation+'deg)');
|
|
|
|
this.el.css('-o-transform', 'rotate('+rotation+'deg)');
|
|
|
|
this.el.css('-ms-transform', 'rotate('+rotation+'deg)');
|
|
|
|
this.el.css('transform', 'rotate('+rotation+'deg)');
|
2011-09-16 00:50:59 +02:00
|
|
|
$('body').append(this.el);
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
|
|
|
|
Raindrop.prototype.ttl = 3000;
|
|
|
|
|
|
|
|
Raindrop.prototype.render = function() {
|
|
|
|
var t = now();
|
|
|
|
var d = (t - this.lastUpdate) / 1000;
|
|
|
|
this.x += this.speedX * d;
|
2011-09-16 01:18:34 +02:00
|
|
|
this.speedY += 23 * d; /* gravity */
|
2011-09-16 00:50:59 +02:00
|
|
|
this.y += this.speedY * d;
|
|
|
|
|
2011-09-17 02:12:12 +02:00
|
|
|
this.el.css('left', this.x+'px');
|
|
|
|
this.el.css('top', this.y+'px');
|
2011-09-16 00:50:59 +02:00
|
|
|
this.el.css('opacity', (this.fadeUntil - t) / this.ttl);
|
|
|
|
|
|
|
|
this.lastUpdate = t;
|
|
|
|
|
|
|
|
var that = this;
|
|
|
|
requestAnimFrame(function() {
|
|
|
|
if (now() > that.fadeUntil)
|
|
|
|
that.el.detach();
|
|
|
|
else
|
|
|
|
that.render();
|
|
|
|
}, this.el[0]);
|
|
|
|
};
|
|
|
|
|
|
|
|
|
2011-09-15 23:39:34 +02:00
|
|
|
function Cloud() {
|
2011-09-16 00:50:59 +02:00
|
|
|
this.lastUpdate = now();
|
|
|
|
this.speedX = 10 + Math.random() * 50;
|
2011-09-15 23:39:34 +02:00
|
|
|
if (Math.random() < 0.5) {
|
2011-09-17 03:43:11 +02:00
|
|
|
this.x = -80;
|
2011-09-15 23:39:34 +02:00
|
|
|
} else {
|
|
|
|
this.speedX *= -1;
|
2011-09-16 01:12:14 +02:00
|
|
|
this.x = screen.width;
|
2011-09-15 23:39:34 +02:00
|
|
|
}
|
2011-09-17 02:29:55 +02:00
|
|
|
this.y = Math.floor(Math.random() * screen.height);
|
2011-09-17 03:20:14 +02:00
|
|
|
this.el = $('<img class="backgroundcloud" src="images/cloud.png"/>');
|
2011-09-15 23:39:34 +02:00
|
|
|
$('body').append(this.el);
|
2011-09-17 02:58:58 +02:00
|
|
|
|
|
|
|
var that = this;
|
|
|
|
this.el.mousemove(function(ev) {
|
|
|
|
if (ev.offsetX < 36)
|
|
|
|
that.speedX += 10;
|
|
|
|
else
|
|
|
|
that.speedX -= 10;
|
|
|
|
});
|
2011-09-15 23:39:34 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
Cloud.prototype.update = function() {
|
2011-09-16 00:50:59 +02:00
|
|
|
this.x += this.speedX * (now() - this.lastUpdate) / 1000;
|
|
|
|
this.lastUpdate = now();
|
2011-09-15 23:39:34 +02:00
|
|
|
|
2011-09-17 02:12:12 +02:00
|
|
|
this.el.css('left', this.x + 'px');
|
2011-09-15 23:39:34 +02:00
|
|
|
this.el.css('top', this.y + 'px');
|
|
|
|
|
|
|
|
if (this.isDone())
|
|
|
|
this.el.detach();
|
2011-09-16 00:50:59 +02:00
|
|
|
else if (this.raining && Math.random() < 0.1)
|
2011-09-17 04:46:56 +02:00
|
|
|
new Raindrop(this.x + 8 + Math.random() * 54, this.y + 22, this.speedX);
|
2011-09-15 23:39:34 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
Cloud.prototype.isDone = function() {
|
2011-09-17 03:43:11 +02:00
|
|
|
return (this.x < -80) || (this.x > screen.width);
|
2011-09-15 23:39:34 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var clouds = [];
|
|
|
|
function stepClouds() {
|
2011-09-16 00:50:59 +02:00
|
|
|
if (clouds.length < 12 && Math.random() < 0.05)
|
2011-09-15 23:39:34 +02:00
|
|
|
clouds.push(new Cloud());
|
|
|
|
|
|
|
|
clouds = clouds.filter(function(cloud) {
|
|
|
|
cloud.update();
|
|
|
|
return !cloud.isDone();
|
|
|
|
});
|
2011-09-16 02:16:59 +02:00
|
|
|
for(var i = 1; i < clouds.length; i++)
|
|
|
|
for(var j = 0; j < i; j++) {
|
|
|
|
var cloud1 = clouds[i];
|
|
|
|
var cloud2 = clouds[j];
|
|
|
|
|
2011-09-15 23:55:35 +02:00
|
|
|
if (cloud1 !== cloud2 &&
|
2011-09-16 02:16:59 +02:00
|
|
|
cloud1.x > cloud2.x - 72 &&
|
|
|
|
cloud1.x < cloud2.x + 72 &&
|
|
|
|
cloud1.y > cloud2.y - 40 &&
|
|
|
|
cloud1.y < cloud2.y + 40 &&
|
2011-09-16 00:50:59 +02:00
|
|
|
Math.random() < 0.01) {
|
|
|
|
|
2011-09-17 03:26:16 +02:00
|
|
|
if (cloud1.y < cloud2.y) {
|
|
|
|
new Flash(cloud1.x + 36, cloud1.y + 38);
|
|
|
|
cloud2.raining = true;
|
|
|
|
} else {
|
|
|
|
new Flash(cloud2.x + 36, cloud2.y + 38);
|
|
|
|
cloud1.raining = true;
|
|
|
|
}
|
2011-09-16 00:50:59 +02:00
|
|
|
}
|
2011-09-16 02:16:59 +02:00
|
|
|
}
|
2011-09-15 23:39:34 +02:00
|
|
|
|
2011-09-16 02:11:18 +02:00
|
|
|
if (funEnabled) {
|
|
|
|
requestAnimFrame(stepClouds, 'body');
|
|
|
|
} else {
|
|
|
|
clouds.forEach(function(cloud) {
|
|
|
|
cloud.el.detach();
|
|
|
|
});
|
|
|
|
clouds = [];
|
|
|
|
}
|
2011-09-15 23:39:34 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
2011-09-16 02:11:18 +02:00
|
|
|
$('#cloudy-sun').click(function() {
|
|
|
|
funEnabled = !funEnabled;
|
|
|
|
if (funEnabled) {
|
2011-09-25 03:04:10 +02:00
|
|
|
var solar = $('<div id="solar"> </div>');
|
|
|
|
solar.hide();
|
|
|
|
$('#cloudy').append(solar);
|
|
|
|
$('#solar').fadeIn(1000);
|
|
|
|
setTimeout(stepClouds, 100);
|
2011-09-16 02:11:18 +02:00
|
|
|
} else {
|
2011-09-25 03:04:10 +02:00
|
|
|
$('#solar').detach();
|
2011-09-16 02:11:18 +02:00
|
|
|
}
|
|
|
|
});
|
2011-09-15 23:39:34 +02:00
|
|
|
});
|