61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
/* 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);
|
|
};
|
|
})();
|
|
|
|
|
|
function Cloud() {
|
|
this.lastUpdate = new Date().getTime();
|
|
this.speedX = Math.random() * 20;
|
|
if (Math.random() < 0.5) {
|
|
this.x = -50;
|
|
} else {
|
|
this.speedX *= -1;
|
|
this.x = $('body').innerWidth();
|
|
}
|
|
this.y = Math.floor(Math.random() * $('body').innerHeight());
|
|
this.el = $('<img class="backgroundcloud" src="images/pixelcloud.png"/>');
|
|
$('body').append(this.el);
|
|
}
|
|
|
|
Cloud.prototype.update = function() {
|
|
var now = new Date().getTime();
|
|
this.x += this.speedX * (now - this.lastUpdate) / 1000;
|
|
this.lastUpdate = now;
|
|
|
|
this.el.css('left', Math.floor(this.x) + 'px');
|
|
this.el.css('top', this.y + 'px');
|
|
|
|
if (this.isDone())
|
|
this.el.detach();
|
|
};
|
|
|
|
Cloud.prototype.isDone = function() {
|
|
return (this.x < -100) || (this.x > $('body').innerWidth());
|
|
};
|
|
|
|
|
|
var clouds = [];
|
|
function stepClouds() {
|
|
if (clouds.length < 23 && Math.random() < 0.1)
|
|
clouds.push(new Cloud());
|
|
|
|
clouds = clouds.filter(function(cloud) {
|
|
cloud.update();
|
|
return !cloud.isDone();
|
|
});
|
|
|
|
requestAnimFrame(stepClouds, 'body');
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
setTimeout(stepClouds, 100);
|
|
});
|