|
PHP Basics
• Administrationsbereich
• Counter
• Umfrage
• Kalender
• Kontaktformular
Javascript
• WebAudio Player
• WebAudio Player Singles
• Web-Farbmixer
• Beim Scrollen nachladen
Canvas
• Weihnachtskalender
• BCD Uhr
• Analog Anzeigeinstrument
• Drehregler
• Schieberegler
• Schiebeschalter
Navigation
• Registerkarten-Navigation
• Rotationsmenue
Animation & Spiele
• Warp-Flug
• Lichtjockey
HTML
• HTML 5 Grundgerüst
CSS
• Responsive Tabelle
|
| [Beispiel] [Download] |
Dieser Weihnachtskalender basiert auf einer Canvas-Zeichenfläche.
Er ist als PHP-Datei ausgeführt um zum einen die Linkziele hinter den Toren nicht im Quelltext sehen zu können und zum anderen um die geöffneten Tore in einem Cookie und einer Session abspeichern zu können.
Bei einem Klick auf ein Tor wird zunächst das Datum geprüft, danach erfolgt die animierte Öffnung des Tores.
Zuletzt wird an den hinterlegten Link weitergeleitet. Das Tor bleibt danach offen stehen.
Bei der Weiterleitung wird das Datum ebenfalls durch PHP geprüft, um eine manuelle Eingabe eines anderen Links mit einer höheren ID (Tagesdatum) zu vermeiden.
Die Anordnung der Tore erfolgt bei jedem Seitenaufruf und ggf. nach jeder Größenänderung des Browserfensters zufällig und somit immer unterschiedlich. Da hat man wenigstens jedesmal etwas zu suchen...
Dem Kalender kann eine feste Höhe und Breite zugewiesen werden oder er passt sich an die Fenstergröße, abzüglich eines einstellbaren Randes an.
Die kalenderdatei wird über einen einfachen php-include eingebunden (siehe Beispielseite).
Es gibt in diesem Script auch zwei Stellen zur Konfiguration. Einmal in PHP und einmal in Javascript an unterschiedlichen Stellen im Quellcode. Die Bilder lassen sich natürlich beliebig austauschen.
|
|
