datenspuren: background pixel clouds

content/static/datenspuren/script/clouds.js

@@ -0,0 +1,60 @@
+/* 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);
+});

content/static/datenspuren/style/style.css

@@ -368,3 +368,11 @@ td.event {
         transform:rotate(360deg);
     }
 }
+
+.backgroundcloud {
+    position: fixed;
+    width: 72px;
+    height: 40px;
+    z-index: -9;
+    opacity: 0.4;
+}

xsl/datenspuren/xhtml5.xsl

@@ -154,6 +154,12 @@
         <xsl:text>Cloudy - mit Aussicht auf Datenspuren 2011</xsl:text>
         <xsl:value-of select="$title" />
       </title>
+      <script type="application/javascript" src="script/jquery-1.6.4.min.js" defer="defer">
+	<xsl:text> </xsl:text>
+      </script>
+      <script type="application/javascript" src="script/clouds.js" defer="defer">
+	<xsl:text> </xsl:text>
+      </script>
     </head>
   </xsl:template>