JavaScript Codeschnipsel: Farbwechsel im Sonnenlauf

Lesezeit etwa 8 Minuten

Anfang

Ich mag es, wenn auf der Webseite dynamische Elemente basierend auf kalendarischen Ereignissen verankert sind, also zum Beispiel der das Hintergrundbild automatisch an die Jahreszeiten angepasst werden. Da ich ein fauler Mensch bin, programmiere ich lieber einen Algorithmus, anstatt von Hand bei jeder Gelegenheit Bilder oder CSS Code auszutauschen.

Aktuell lasse ich die Farbe des Hintergrunds auf meiner Webseite durch das Jahr hinweg anders erscheinen, dabei soll es so sein, dass zum Zeitpunkt der Wintersonnenwende, also rund um den 21./22. Dezember der Hintergrund passend dunkel, hier: schwarz sein soll, wohingegen im Sommer, zur Sommersonnenwende dann natürlich ein helles weiß erstrahlen soll. Der Hintergrund der Webseite passt sich also in den Grautönen der vermeintlichen Helligkeit oder Sonnenstunden am jeweiligen Tag an.

Gelöst habe ich dies mittels einer kleinen JavaScript Funktion, die den CSS Code verändert, die ich hier auch gerne zur Verfügung stelle.

Die Theorie

Die Erde eiert leider gewaltig und somit ist ein Jahr bekanntlich nicht immer gleich lang. Das sogenannte Sonnenjahr beträgt im Mittel rund 365,2422 Tage, weswegen ja auch die Schaltjahre eingeführt wurden, die den Vierteltag wieder kompensieren.

Daneben wird in jedem Jahrtausend das Sonnenjahr sogar noch einmal etwa eine Sekunde länger, doch für meine Zwecke – zumindest gehe ich derzeit davon aus, dass ich den Code nicht über 1000 Jahre nutzen werde – reicht der aktuelle Wert.

Ebenso lasse ich zwei weitere Punkte außer acht: zum Einen, dass die Länge des Sonnenjahres auch zwischen den einzelnen Jahren schwankt und zum Anderen, dass die Helligkeit über das Jahr verteilt nicht unbedingt linear erfolgt..

Die Hintergrundfarbe soll in Grautönen dargestellt werden und von weiß bis schwarz reichen. Grautöne erzielt man relativ einfach im CSS Code, indem alle drei Farbanteile (rot, grün und blau) den gleichen Wert erhalten, also beispielsweise mit dem Code #828282. Die Zeichen nach der ‘#’ werden dabei in Zweiergruppen betrachtet und repräsentieren auf diese Weise und in der Reihenfolge den Farbwert für rot, grün und blau, also jeweils ‘82’. Zu beachten ist dabei allerdings, dass die Werte in Hexadezimalzahlen angegeben werden. Die ‘82’ hier steht somit eigentlich für die Dezimalzahl 130. Auch muss man wissen, dass die Zahlenwerte von 0 (ganz dunkel, bzw. kein Farbanteil) bis 255 (bzw. als Hexadezimalzahl: ‘ff’, ganz hell, bzw. viel Farbanteil) reichen.

Natürlich könnte man auch den gesamten Farbraum mit 16.777.216 verschiedenen Farbtönen abbilden, allerdings wollte ich den Besuchern auf meiner Webseite dabei entstehende grelle Neonfarben ersparen.

Zuletzt möchte ich noch, dass zur Wintersonnenwende das Schwarz, also der Farbwert 0 gegeben ist. Sowohl am Tag davor als auch danach sollte es ebenfalls dunkel sein, erst zur Sommersonnenwende, also ca. ein halbes Sonnenjahr später greift der Farbwert 255. Zu keiner Zeit soll ein “Sprung” von 0 auf 255 oder umgekehrt erfolgen, der Farbverlauf ist sanft und wie ein Pendel: von schwarz langsam zu weiß und dann wieder langsam zurück zum schwarz.

Übrigens: Insgesamt existieren also 256 Farbwerte. Bis auf 0 und 255 wird jeder Farbwert im Jahr zwei mal genutzt, was 510 Änderungen entspricht. Oder umgekehrt: bei 365 Tagen im Jahr ändert sich der Farbwert etwa alle 17 Stunden. Die einzelnen Nuancen sind allerdings so gering, dass es kaum jemanden von heute auf morgen auffallen wird.

Schreibe einen Kommentar

Nutze dieses Kommentarfeld um deine Meinung oder Ergänzung zu diesem Beitrag kundzutun. Verhalte dich bitte respektvoll und höflich! Kommentare werden vor der Veröffentlichung in der Regel moderiert und bei Verstößen gegen geltendes Recht, die guten Sitten, fehlendem Bezug oder missbräuchlicher Verwendung nicht freigegeben oder gelöscht.
Über die Angabe deines Namens, deiner E-Mail Adresse und deiner Webseite freuen wir uns, doch diese Felder sind optional. Deine E-Mail Adresse wird dabei zu keinem Zeitpunkt veröffentlicht.

Um mit dem Betreiber dieser Seite nicht-öffentlich in Kontakt zu treten, nutze die Möglichkeiten im Impressum.