datenspuren: sun rays are standard now

content/static/datenspuren/script/clouds.js

@@ -159,13 +159,13 @@ $(document).ready(function() {
     $('#cloudy-sun').click(function() {
 	funEnabled = !funEnabled;
 	if (funEnabled) {
-	    var solar = $('<div id="solar"> </div>');
+	    $('#solar').removeClass('anim-paused');
-	    solar.hide();
+	    $('#solar').addClass('anim-running');
-	    $('#cloudy').append(solar);
+	    stepClouds();
-	    $('#solar').fadeIn(1000);
-	    setTimeout(stepClouds, 100);
 	} else {
-	    $('#solar').detach();
+	    $('#solar').removeClass('anim-running');
+	    $('#solar').addClass('anim-paused');
 	}
     });
 });
+

content/static/datenspuren/style/style.css

@@ -149,12 +149,28 @@ dl dd {
     right: -3900px;
     width: 8000px;
     height: 8000px;
+}
+.solar-anim {
     -webkit-animation: rotate 230s infinite linear;
     -moz-animation: rotate 230s infinite linear;
     -o-animation: rotate 230s infinite linear;
     -ms-animation: rotate 230s infinite linear;
     animation: rotate 230s infinite linear;
 }
+.anim-paused {
+    -webkit-animation-play-state: paused;
+    -moz-animation-play-state: paused;
+    -ms-animation-play-state: paused;
+    -o-animation-play-state: paused;
+    animation-play-state: paused;
+}
+.anim-running {
+    -webkit-animation-play-state: running;
+    -moz-animation-play-state: running;
+    -ms-animation-play-state: running;
+    -o-animation-play-state: running;
+    animation-play-state: running;
+}
 @-webkit-keyframes rotate {
     0% {
         -webkit-transform:rotate(0deg);

xsl/datenspuren/xhtml5.xsl

@@ -46,6 +46,9 @@
             <div id="cloudy-sun" title="Click here!">
               <xsl:text> </xsl:text>
             </div>
+            <div id="solar" class="solar-anim anim-paused">
+              <xsl:text> </xsl:text>
+            </div>
 	  </div>
           <xsl:call-template name="heading">
             <xsl:with-param name="title" select="$title"/>