Ich hatte ja bereit damit experimentiert:
https://bastbox.de/dynamische-banner-fuer-jahres-und-tageszeiten-ein-einfaches-javascript/
https://bastbox.de/jahreszeiten-uhrzeiten-darstellungen-von-bilder/

SciFanTure.de bekommt jetzt einen animierten Hintergrund mit Zeitsteuerung…

Ziel war es, den Hintergrund unseres Forums zunächst etwas „bewegter“ zu gestalten und anschließend unterschiedliche Zustände je nach Tageszeit darzustellen. In diesem Fall habe ich es jedoch einfach gehalten und mich auf zwei Zustände beschränkt: Tag und Nacht. Selbstverständlich sind die Tages- und Nachtzeiten zumindest grob an die Jahreszeiten angepasst.

Aktuelle Uhrzeit und Monat bestimmen:

Zu Beginn des Skripts wird das Datum der aktuellen Seite abgerufen.
Mit new Date() erhalte ich das aktuelle Datum und die aktuelle Uhrzeit.
Mit currentDate.getHours() hole ich mir die Stunde des aktuellen Tages, und mit currentDate.getMonth() den Monat, wobei 0 für Januar und 11 für Dezember steht.

Bedingung für Dezember und Januar (Monate 0 und 11):

Ich habe eine spezielle Bedingung eingefügt, die für Dezember und Januar einen festen Zeitraum für den Tag von 8 bis 18 Uhr festlegt.
Das passiert mit dem folgenden Code:

if (currentMonth === 0 || currentMonth === 11) {
// Dezember und Januar: Tag von 8 bis 18 Uhr
dayStart = 8;
dayEnd = 18;
}

Hier prüfe das Script, ob der aktuelle Monat Januar (0) oder Dezember (11) ist.
Wenn dies der Fall ist, wird der dayStart auf 8 Uhr gesetzt und dayEnd auf 18 Uhr.

Bedingung für Frühling und Sommer (Monate 3 bis 8):

Falls es nicht Dezember oder Januar ist, prüfe das Script, ob der aktuelle Monat zwischen April und September liegt (Monate 3 bis 8). Für diese Monate wird der Tag früher beginnen und später enden, nämlich von 5 Uhr bis 21 Uhr:

else if (currentMonth >= 3 && currentMonth <= 8) {
dayStart = 5;
dayEnd = 21;
}

else {
dayStart = 7;
dayEnd = 19;
}

const backgroundImage = currentHour >= dayStart && currentHour < dayEnd
? "./javabau/bg-day.gif"
: "./javabau/bg-night.gif";

Hintergrundbild anwenden:

Abschließend wird das Hintergrundbild des Forums mit document.body.style.background  gesetzt, und zwar so, dass es auf der gesamten Seite wiederholt wird und fixiert bleibt:

document.body.style.background = `url("${backgroundImage}") repeat #F9F9F9`;
document.body.style.backgroundAttachment = "fixed";

Die festgelegten Zeiten für den Tag:

Dezember und Januar:
Tag: 8:00 Uhr bis 18:00 Uhr

Frühling und Sommer (April bis September):
Tag: 5:00 Uhr bis 21:00 Uhr

Herbst und Winter (außer Dezember und Januar):
Tag: 7:00 Uhr bis 19:00 Uhr

Das Skript sorgt dafür, dass im Forum SciFanTure.de das Hintergrundbild je nach Tageszeit angepasst wird und sich so der passende „Tag-Nacht-Rhythmus“ je nach Monat einstellt. Besonders für die Wintermonate habe ich eine Ausnahme eingeführt, damit der Tag von Dezember bis Januar strikt nur zwischen 8 und 18 Uhr angezeigt wird.

Auszug aus dem Script:

1. Version, da waren Dezember und Januar noch mit im „Winter“

2. Version: Im Dezember und Januar wird es „noch“ früher hell und wieder dunkel

Die (derzeitigen) Bilder sind animiert:

Oben: Die Tagansicht ist etwas ruckelig. In der Praxis fällt das jedoch nicht so sehr auf. Das Problem hier ist, dass es sich um ein GIF-Bild handelt. Im Vergleich zu anderen möglichen Formaten für Homepage-Hintergründe ist das GIF aufgrund seiner Einfachheit und vor allem der Browser-Kompatibilität am besten geeignet. Das Kernproblem bei solchen Animationen, wie z.B. den Wolken, ist: Je flüssiger das Bild ist – unabhängig von der Geschwindigkeit – desto mehr Speicherplatz wird benötigt. Wäre das Wolkenbild richtig schön flüssig und langsam, hätte es selbst in dem kleinen, sich immer wiederholenden Format ca. 20 MB. Das ist für ein Hintergrundbild einer Homepage utopisch groß. Daher habe ich mit der Geschwindigkeit, der Framerate und der Auflösung so lange experimentiert, bis ich ca. 400 KB (0,4 MB) erreicht hatte.

Oben: Der Sternenhimmel (Dezember) hingegen ist nur wenige KB groß.

Oben: Der Sternenhimmel (Januar bis November) ist nicht ganz so „bunt“ und „aktiv“ wie der für Dezember.

 

Das sieht im Forum ca. so aus: (TAG / NACHT auf dem Screenshot NICHT animiert)


Nachträglich hat die Tabelle mit dem „Footer“ einen Hintergrund und runde Ecken bekommen. Das wurde an das Forendesign angepasst und ist auch in der Tagesansicht gut lesbar.

Die Bilder, die für den Hintergrund verwendet werden, sind nahtlos (also „tilable“). Das bedeutet, dass sie so gestaltet sind, dass sie sich ohne sichtbare Übergänge oder Lücken wiederholen können. Diese Eigenschaft ist besonders wichtig für Hintergrundbilder auf Webseiten, da sie oft wiederholt werden müssen, um den gesamten Bildschirm zu füllen, besonders bei größeren Bildschirmauflösungen.

Der Grund, warum die Bilder nahtlos sind, liegt darin, dass sie speziell so bearbeitet wurden, dass die Ränder der Bilder perfekt aufeinanderpassen, wenn sie wiederholt werden. Bei einem nahtlosen Bild wird darauf geachtet, dass die Kanten des Bildes so gestaltet sind, dass es beim Wiederholen keine harten Übergänge gibt, die den Eindruck erwecken würden, dass das Bild nicht zusammenpasst.

Wiederholung ohne sichtbare Nähte:

Wenn ein Hintergrundbild wiederholt wird, kann es ohne nahtlose Übergänge unordentlich wirken, da sichtbare Linien oder Übergänge entstehen, die das Bild „zersplittern“. Nahtlose Bilder haben diese Übergänge jedoch nicht, wodurch sie einen gleichmäßigen, kontinuierlichen Eindruck vermitteln, auch wenn das Bild auf der gesamten Seite wiederholt wird.

Optimierung der Ladezeiten:

Nahtlose Bilder sind in der Regel kleiner und effizienter, da sie so entworfen wurden, dass sie problemlos wiederholt werden können, anstatt für jede Bildschirmgröße ein neues Bild zu erzeugen. Das spart nicht nur Speicherplatz, sondern reduziert auch die Ladezeiten der Seite, da das Bild nur einmal geladen wird und dann beliebig oft wiederholt wird.

Einheitliches Design:

Nahtlose Bilder tragen zu einem konsistenten und harmonischen Design bei. Die Wiederholung des Bildes wird kaum wahrgenommen, da die Übergänge zwischen den Kanten der wiederholten Bereiche fließend sind. Dies sorgt dafür, dass das Design der Seite nicht durch unregelmäßige Übergänge gestört wird.

Die Erstellung von nahtlosen Hintergrundbildern ist ein häufiger Schritt bei der Webgestaltung, um ein ästhetisch ansprechendes, professionelles und funktionales Layout zu gewährleisten.