From 8b50d6fa8d1164aaba838dc6bae508d38f0f64b3 Mon Sep 17 00:00:00 2001 From: Astro Date: Fri, 16 Sep 2011 00:50:59 +0200 Subject: [PATCH 1/3] datenspuren cloud background starts awesome rain, many fixes and improvements! --- content/static/datenspuren/script/clouds.js | 64 ++++++++++++++++++--- content/static/datenspuren/style/style.css | 15 +++-- 2 files changed, 66 insertions(+), 13 deletions(-) diff --git a/content/static/datenspuren/script/clouds.js b/content/static/datenspuren/script/clouds.js index 28251cbe6..4a28eb218 100644 --- a/content/static/datenspuren/script/clouds.js +++ b/content/static/datenspuren/script/clouds.js @@ -11,6 +11,10 @@ window.requestAnimFrame = (function(){ })(); +function now() { + return new Date().getTime(); +} + function Flash(x, y) { this.el = $(''); this.el.css('left', (x-10)+'px'); @@ -24,30 +28,70 @@ function Flash(x, y) { } +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 = $('

'); + this.el.text(''+Math.floor(Math.random() * 2)); + $('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; + this.speedY += 9.81 * d; + this.y += this.speedY * d; + + this.el.css('left', Math.floor(this.x)+'px'); + this.el.css('top', Math.floor(this.y)+'px'); + 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]); +}; + + function Cloud() { - this.lastUpdate = new Date().getTime(); - this.speedX = Math.random() * 200; + this.lastUpdate = now(); + this.speedX = 10 + Math.random() * 50; 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.y = Math.floor(Math.random() / 2 * $('body').innerHeight()); this.el = $(''); $('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.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(); + else if (this.raining && Math.random() < 0.1) + new Raindrop(this.x + 8 + Math.random() * 48, this.y + 32, this.speedX); }; Cloud.prototype.isDone = function() { @@ -57,7 +101,7 @@ Cloud.prototype.isDone = function() { var clouds = []; function stepClouds() { - if (clouds.length < 23 && Math.random() < 0.1) + if (clouds.length < 12 && Math.random() < 0.05) clouds.push(new Cloud()); clouds = clouds.filter(function(cloud) { @@ -71,9 +115,13 @@ function stepClouds() { cloud1.x < cloud2.x + 40 && cloud1.y > cloud2.y - 72 && cloud1.y < cloud2.y + 72 && - Math.random() < 0.01) + Math.random() < 0.01) { + new Flash(Math.floor((cloud1.x + cloud2.x) / 2), Math.max(cloud1.y, cloud2.y) + 40); + cloud1.raining = true; + cloud2.raining = true; + } }); }); diff --git a/content/static/datenspuren/style/style.css b/content/static/datenspuren/style/style.css index 557796cc0..35c62b782 100644 --- a/content/static/datenspuren/style/style.css +++ b/content/static/datenspuren/style/style.css @@ -370,14 +370,19 @@ td.event { } .backgroundcloud { - position: fixed; + position: absolute; width: 72px; height: 40px; z-index: -9; - opacity: 0.4; } .backgroundflash { - position: fixed; - z-index: -8; - opacity: 0.8; + position: absolute; + z-index: -7; +} +.backgroundraindrop { + position: absolute; + z-index: -8; + color: #66f; + font-family: monospace; + font-size: 50%; } From 24bfe1f0e7123763320c68635d080c847e9a08e8 Mon Sep 17 00:00:00 2001 From: Astro Date: Fri, 16 Sep 2011 00:52:31 +0200 Subject: [PATCH 2/3] lighten up the pixelcloud --- .../static/datenspuren/images/pixelcloud.png | Bin 315 -> 410 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/content/static/datenspuren/images/pixelcloud.png b/content/static/datenspuren/images/pixelcloud.png index 51f85d11eb6855cdd8a92ffe1dc02954de78e280..7caf3157a0c68dbda0fe914585ad594a0ea82b83 100644 GIT binary patch delta 370 zcmV-&0ge8<0-6IMiBL{Q4GJ0x0000DNk~Le0000;0000e2nGNE09_fp9g!gx3I729 z0RN!9r<0LDA%7MwINI=98vpPGn}ON*QNf0E}2R${kQ)uUKNf1<8gWgtqN^24X zp;5#FU0Z`td(LYS1YwI|fyQ>ytDMHA!skn42&xs7TFIwN;`5C$qLZ!?L@P!8khS&| zl1k?VK|7_Vd48(TNm_l(CGpw=L9K$gBnpXoN=OU^|4B;=%86P%c(W>$KjWje(T&qv QAOHXW07*qoM6N<$f{t07_y7O^ delta 274 zcmV+t0qy>p1G@qtiBL{Q4GJ0x0000DNk~Le0000a0000K2nGNE0Ofk0HIX3}2><{9 z008+zyMK{DA%7Jm32K}@vj6}9yGcYrR7l6omO&DOFbGBSGoCd$6S*v1w6=_491JM^ zo48PUdb;B$*@mpa7)RL^DQ^<5jb1K~-t%uUx zkuLq6Lsbs54DE4c{O>Tc4!>v-(KIMipkz#KNKR09uNn-rLzRdg>7U;F#DP0bd(ZXf Y1prS3`!;lDNdN!<07*qoM6N<$f`OrEL;wH) From ae55d68e8b0654bdff994c67849280d83b596bab Mon Sep 17 00:00:00 2001 From: Astro Date: Fri, 16 Sep 2011 01:04:06 +0200 Subject: [PATCH 3/3] datenspuren sun rays positioning --- content/static/datenspuren/images/sun.svg | 20 ++++++++++---------- content/static/datenspuren/style/style.css | 11 ++++++----- xsl/datenspuren/xhtml5.xsl | 8 ++++---- 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/content/static/datenspuren/images/sun.svg b/content/static/datenspuren/images/sun.svg index 6c25a7e77..17d2a576b 100644 --- a/content/static/datenspuren/images/sun.svg +++ b/content/static/datenspuren/images/sun.svg @@ -9,8 +9,8 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="1600" - height="1600" + width="8000" + height="8000" id="svg2" version="1.1" inkscape:version="0.48.1 r9760" @@ -24,9 +24,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="0.35355339" - inkscape:cx="907.24444" - inkscape:cy="754.91962" + inkscape:zoom="0.088388348" + inkscape:cx="2468.9986" + inkscape:cy="4383.3628" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" @@ -43,7 +43,7 @@ image/svg+xml - + @@ -51,7 +51,7 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(0,547.6378)"> + transform="translate(0,6947.6378)"> + d="M 837.14281,1149.505 200.00451,233.50242 691.99208,1234.9784 198.49319,234.24629 535.72342,1297.8636 196.88788,234.75661 371.82759,1336.7557 195.22444,235.02196 203.96578,1350.786 193.54003,235.03643 35.88773,1339.6412 191.87228,234.79969 -128.65197,1303.5701 190.25844,234.31702 -285.97778,1243.3785 188.73456,233.59922 -432.5753,1160.4109 187.33469,232.66231 -565.16977,1056.5209 186.09009,231.52723 -680.79927,934.02902 185.02856,230.21933 -776.88081,795.67159 184.17383,228.76782 -851.2681,644.5393 183.54498,227.20513 -902.29944,484.00818 183.15606,225.56617 -928.83489,317.66423 183.01575,223.88756 -930.28167,149.2233 183.1272,222.20678 -906.60748,-17.551914 183.48791,220.56138 -858.34116,-178.93593 184.08983,218.98812 -786.56089,-331.3237 184.9195,217.52215 -692.87012,-471.31113 185.9584,216.1962 -579.36177,-595.77113 187.18332,215.03991 -448.5714,-701.92347 188.5669,214.07909 -303.42067,-787.39689 190.07822,213.33522 -147.15201,-850.28205 191.68353,212.8249 16.743816,-889.17419 193.34697,212.55955 184.60563,-903.20454 195.03138,212.54508 352.68368,-892.05967 196.69913,212.78182 517.22338,-855.98855 198.31297,213.26449 674.54919,-795.79694 199.83685,213.98229 821.14671,-712.82943 201.23672,214.9192 953.74118,-608.93938 202.48132,216.05428 1069.3707,-486.4475 203.54285,217.36219 1165.4522,-348.09008 204.39758,218.81369 1239.8395,-196.95779 205.02643,220.37638 1290.8709,-36.426664 205.41535,222.01534 1317.4063,129.91728 205.55566,223.69396 1318.8531,298.35821 205.44421,225.37474 1295.1789,465.13343 205.0835,227.02013 1246.9126,626.51744 204.48158,228.59339 1175.1323,778.90521 203.65191,230.05937 1081.4415,918.89264 202.61301,231.38531 967.93318,1043.3526 201.38809,232.54161 z" + transform="matrix(3.5590153,0,0,3.5590153,3314.7054,-3757.2057)" /> diff --git a/content/static/datenspuren/style/style.css b/content/static/datenspuren/style/style.css index 8cb875a6d..70c8a1d5e 100644 --- a/content/static/datenspuren/style/style.css +++ b/content/static/datenspuren/style/style.css @@ -9,6 +9,7 @@ body { } #cloudy { background: url("../images/cloudy.png"); + position: relative; height: 231px; width: 264px; margin-right: -44.400000000000006pt; @@ -465,11 +466,11 @@ td.event { background-image: url('../images/sun.svg'); z-index: -1000; overflow: visible; - position: fixed; - top: -800px; - right: -800px; - width: 1600px; - height: 1600px; + position: absolute; + top: -3900px; + right: -3900px; + width: 8000px; + height: 8000px; -webkit-animation: rotate 230s infinite linear; -moz-animation: rotate 230s infinite linear; -o-animation: rotate 230s infinite linear; diff --git a/xsl/datenspuren/xhtml5.xsl b/xsl/datenspuren/xhtml5.xsl index bfe4638c5..0d8b3a759 100644 --- a/xsl/datenspuren/xhtml5.xsl +++ b/xsl/datenspuren/xhtml5.xsl @@ -42,7 +42,10 @@
- + +
+ +
@@ -259,9 +262,6 @@ Copyleft 2004 - 2011, Chaos Computer Club Dresden | mail@c3d2.de
-
- -