Eine Jahreszeiteanimation erlaubt es für jeden Tag im Jahr eine andere Animation einzustellen, bzw. auch für einige Zeit keine Animation einzustellen. So kann man "jedes Jahr" immer 24 Tage vor Weihnachten mit dem Schnee beginnen, zu Weihnachten auf Geschenke umstellen, am Frühlingsanfang eine Woche Blumen erscheinen lassen usw.
Diese Lösung zeigt dem Besucher auch eine kleine Menübox an, mit der er den Schnee aber auch abschalten kann oder die Stärke des Schneefalls beeinflussen kann. Lassen Sie Ihrem Besucher die Freiheit seine Schneemenge selber zu bestimmen.
Wenn man mit web2date jahreszeitliche Animationen wünscht, ist das ganz einfach (immer mit einer Kopie des Designs arbeiten):
Diesen Code in global.ccml anhängen
<cc:picture obj="snow1.gif" dst="snow1.gif" src="snow1.gif">
<cc:picture obj="snow2.gif" dst="snow2.gif" src="snow2.gif">
<cc:picture obj="snow3.gif" dst="snow3.gif" src="snow3.gif">
<cc:picture obj="snow4.gif" dst="snow4.gif" src="snow4.gif">
<cc:picture obj="snow5.gif" dst="snow5.gif" src="snow5.gif">
<cc:picture obj="snow6.gif" dst="snow6.gif" src="snow6.gif">
<cc:picture obj="snow7.gif" dst="snow7.gif" src="snow7.gif">
<cc:picture obj="snow8.gif" dst="snow8.gif" src="snow8.gif">
<cc:picture obj="box1.gif" dst="box1.gif" src="box1.gif">
<cc:picture obj="box2.gif" dst="box2.gif" src="box2.gif">
<cc:picture obj="box3.gif" dst="box3.gif" src="box3.gif">
<cc:picture obj="box4.gif" dst="box4.gif" src="box4.gif">
<cc:picture obj="box5.gif" dst="box5.gif" src="box5.gif">
<cc:picture obj="box6.gif" dst="box6.gif" src="box6.gif">
<cc:picture obj="box7.gif" dst="box7.gif" src="box7.gif">
<cc:picture obj="box8.gif" dst="box8.gif" src="box8.gif">
<cc:picture obj="box9.gif" dst="box9.gif" src="box9.gif">
<cc:picture obj="herbst1.gif" dst="herbst1.gif" src="herbst1.gif">
<cc:picture obj="herbst2.gif" dst="herbst2.gif" src="herbst2.gif">
<cc:picture obj="herbst3.gif" dst="herbst3.gif" src="herbst3.gif">
<cc:picture obj="herbst4.gif" dst="herbst4.gif" src="herbst4.gif">
<cc:picture obj="herbst5.gif" dst="herbst5.gif" src="herbst5.gif">
<cc:picture obj="herbst6.gif" dst="herbst6.gif" src="herbst6.gif">
<cc:picture obj="herbst7.gif" dst="herbst7.gif" src="herbst7.gif">
<cc:picture obj="herbst8.gif" dst="herbst8.gif" src="herbst8.gif">
<cc:picture obj="sommer1.gif" dst="sommer1.gif" src="sommer1.gif">
<cc:picture obj="sommer2.gif" dst="sommer2.gif" src="sommer2.gif">
<cc:picture obj="sommer3.gif" dst="sommer3.gif" src="sommer3.gif">
<cc:picture obj="sommer4.gif" dst="sommer4.gif" src="sommer4.gif">
<cc:picture obj="sommer5.gif" dst="sommer5.gif" src="sommer5.gif">
<cc:picture obj="sommer6.gif" dst="sommer6.gif" src="sommer6.gif">
<cc:picture obj="sommer7.gif" dst="sommer7.gif" src="sommer7.gif">
<cc:picture obj="sommer8.gif" dst="sommer8.gif" src="sommer8.gif">
<cc:picture obj="fruehling1.gif" dst="fruehling1.gif" src="fruehling1.gif">
<cc:picture obj="fruehling2.gif" dst="fruehling2.gif" src="fruehling2.gif">
<cc:picture obj="fruehling3.gif" dst="fruehling3.gif" src="fruehling3.gif">
<cc:picture obj="fruehling4.gif" dst="fruehling4.gif" src="fruehling4.gif">
<cc:picture obj="fruehling5.gif" dst="fruehling5.gif" src="fruehling5.gif">
<cc:picture obj="fruehling6.gif" dst="fruehling6.gif" src="fruehling6.gif">
<cc:picture obj="fruehling7.gif" dst="fruehling7.gif" src="fruehling7.gif">
<cc:picture obj="fruehling8.gif" dst="fruehling8.gif" src="fruehling8.gif">
<cc:asset src="snow.js" dst="snow.js" obj="mysnow">
Dann noch die Objekte
Anbei die Objekte (Bilder und ein Javascript-Modul) aus dem
Zip-File [52 KB]
ins Designverzeichnis ablegen. Ggf. eigene oder weitere Bilder anlegen. Weitere Bilder müssen im Script definiert werden. Es können je Jahreszeit unterschiedlich viele Bilder sein.
Der Aufruf
Um den Code dann auszuführen muss im HTML-Code des Seiten-Body noch eine Zeile folgen
<script type="text/javascript" src="<cc:print value="&mysnow.url">" ></script>
Diese Zeile sollt unmittelbar nach der Zeile mit <body....> in der navigation.ccml eingefügt werden. Mit weiteren CCML-Abfragen kann man z.B. die Ausgabe auf einzelne Seiten beschränken. Das Skript selbst enthält eine Steuerung für die jeweiligen Tage des Jahres:
// "w"=Weihnachten, "sn"=Schnee, "f"=Frühling, "s"=Sommer "h"=Herbst "x"=keine Animation heute
for (i=0;i<31+28 ;++i){animation[i]="x"; } // vom Tag 1.1. bis 28.2 keine Animation
Hier wird vom 1. Januar bis zum 28. Februar die Animation "x" also keine Animation zugewiesen. Die Bedeutung der Animation sieht man in der vorausgegangenen Kommentarzeile. In mehreren Zeile wird das Jahr aufgebaut und unterschiedliche Animationen zugewisen. Der User kann die Animation sogar selber ändern.
Bei Verwendung
Das Script funktioniert mit IE7 und FF 2.0 korrekt. Es ist auf eine Bildschirmbreite von ca 1200 pxl optimiert.
