Merge branch 'master' of git.c3d2.de:c3d2-web

Conflicts:
	content/static/datenspuren/style/style.css

content/static/datenspuren/script/clouds.js

@@ -0,0 +1,85 @@
+/* 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 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();
+    });
+}
+
+
+function Cloud() {
+    this.lastUpdate = new Date().getTime();
+    this.speedX = Math.random() * 200;
+    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();
+    });
+    clouds.forEach(function(cloud1) {
+	clouds.forEach(function(cloud2) {
+	    if (cloud1 !== cloud2 &&
+		cloud1.x > cloud2.x - 40 &&
+		cloud1.x < cloud2.x + 40 &&
+		cloud1.y > cloud2.y - 72 &&
+		cloud1.y < cloud2.y + 72 &&
+	        Math.random() < 0.01)
+		new Flash(Math.floor((cloud1.x + cloud2.x) / 2),
+			  Math.max(cloud1.y, cloud2.y) + 40);
+	});
+    });
+
+    requestAnimFrame(stepClouds, 'body');
+}
+
+$(document).ready(function() {
+    setTimeout(stepClouds, 100);
+});

content/static/datenspuren/style/style.css

@@ -130,6 +130,18 @@ p {
     }
 }
 
+.backgroundcloud {
+    position: fixed;
+    width: 72px;
+    height: 40px;
+    z-index: -9;
+    opacity: 0.4;
+}
+.backgroundflash {
+    position: fixed;
+    z-index: -8;
+    opacity: 0.8;
+}
 
 /*
 body {

xsl/datenspuren/xhtml5.xsl

@@ -163,6 +163,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>