perscriptum.de - Webdevelopment

Home Home RSS-Feed-Link RSS-Feed-Link Kontaktformular Kontaktformular Rechtliches Zum Kleingedruckten § Zur Navigation Zur Navigation

perscriptum

Ich seh den Sternenhimmel

.
Sternenhimmel, CC BY-SA ForestWander

Passend zu den langen Winternächten mein neuer „Desktop“-Hintergrund. Wie schon beim Sommerwald habe ich auch hier die scheinbar zufällige Anordnung mit Hilfe des Zikadenprinzips erzeugt, allerdings diesmal komplett ohne Bild. Wer es genauer wissen will, sollte jetzt (wenn möglich) F12 betätigen.

An dem großen Himmelszelt

Der Himmel ist einfach eine große, einfarbig nachtblaue Fläche. Es ist der letzte und damit unterste Hintergrund des html-Tags.

Weißt Du wieviel Sternlein stehen?

Die scheinbar zufällige Anordnung der Sterne beruht, wie schon beim Sommerwald, auf dem Zikadenprinzip: Die Hintergründe sind gekachelt. Die Größen der „Kacheln“ sind in Primzahlen angegeben. Die Sternen-Muster wiederholen sich erst nach 6.224.291.073em.

Wieviele multiple Hintergründe man einem Browser zumuten kann, dafür habe ich keine verlässliche Quelle gefunden. Es kursiert die Zahl acht. Um trotzdem genügend Sterne zusammen zu bekommen, habe ich welche im html-Tag verteilt, im body, und im body:before.

Eine höhere Sternendichte durch kleinere Kachelgrößen habe ich ausprobiert: Wie schon beim Sommerwald zeigte sich auch hier, dass bei zu kleinen Elementen das Auge doch schnell Muster erkennt.


Sizilianisches Mosaik, 12. Jhdt., CC BY-SA Wikimedia-User BMK

Dass auch ja nicht eines fehlet

Die Sterne selbst sind radiale Verläufe, in jeder Kachel eines multiplen Hintergrundes einer. Radiale Verläufe sind in Prozent anzugeben. Bei meinen Experimenten mit kleineren Kachelgrößen wurde das anstrengend: Viele Sterne wurden so klein, dass sie nicht mehr sichtbar waren und händisch gesucht und vergrößert werden mussten. Interessant: Was im Chrome gerade noch so zu sehen war, war es zum Teil im IE nicht mehr.

Wenn das Ende des weißen Punktes eine kleinere Prozentzahl bekommt, als der Anfang der umgebenden durchsichtigen Fläche, wird der Übergang weicher. Im Chrome sah das gut aus – im IE allerdings, wo die Sterne ohnehin schon weicher aussehen, war das zuviel des Guten. Deshalb habe ich überall auf gleiche Prozentzahlen geachtet.

Besucher mit Browsern, die keine radialen Verläufe darstellen können, sehen bewölkten Himmel: Bei ihnen ist alles nachtblau. Der Sternenhimmel ist ein reines Schmuckelement, sie werden hoffentlich an meinen Texten trotzdem Spaß haben.

Alles so schön bunt hier


Sternenhimmel mit Cassiopeia, CC-BY-SA Roberto Mura

Sterne haben leicht unterschiedliche Farben. Deshalb sind auch meine Sterne nicht alle reinweiß: Viele tendieren leicht in verschiedene Farb-Richtungen.

Wie die Sterne funkeln


Wolken schieben sich vor Mond und Sterne, CC-BY-SA 0x010C

Im Pseudo-Element body:after enthält der Hintergrund zwei lineare Verläufe. Sie zeichnen nachtblaue diagonale Linien in ihre Rechtecke. Anders als html und body hat dieses Pseudo-Element position: fixed, scrollt also nicht mit. Wenn nun beim Scrollen die Sterne von html und body hinter so eine Linie geraten, sind sie kurz nicht sichtbar. So entsteht das Funkeln. Die Linien sind unterschiedlich breit, damit die Funkel-Effekte nicht so gleichförmig sind; sie haben sehr harte Kanten für ein plötzliches Ein- und Ausblenden, weil ich finde, dass sanftere Übergänge nicht genug funkeln.

Immer mehr

Unangemessen großen Aufwand machte mir die kleine CSS-Animation ganz am Anfang beim Laden der Seite: In modernen Browsern, die Animationen beherrschen, sollten die nachtblauen Diagonalen anfangs selbständig über die Seite wandern. Obwohl ich die Animation nach allen Regeln der Performancekunst gebaut habe, konnte ich an meinem Lüfter hören, wie sehr sie meinen Rechner belastet hat. Außerdem musste ich aus dieser wandernden Ebene die Sterne entfernen, das war immerhin ein Fünftel meiner Sterne.

Die Sterne erst nach Ende der Animation einzublenden, hätte einen Repaint verursacht, den ich vermeiden wollte. Die nun implementierte Lösung ist ein Kompromiss: Die Ebene mit den nachtblauen Diagonalen und sechs Sternen-Kacheln wird zwei Mal aus- und eingeblendet. Während beim Einblenden sechs zusätzliche Sterne zu sehen sind, werden gleichzeitig andere durch die nachtblauen Diagonalen verdeckt. Da die Animation nur zwei Mal durchläuft, fallen die Regelmäßigkeiten nicht so sehr auf.

Beim manuellen Scrollen wirkt das Funkeln jedenfalls organischer.

Und sonst so?

Damit sich das absolut positionierte body:before über die gesamte Höhe ausdehnt, habe ich den Body selbst relativ positioniert. Er hat keinen z-Index und wird daher dargestellt, als ob er einen z-Index von 0 hätte. Damit bleiben die Pseudo-Elemente stets hinter dem Body mit der Hauptsache: Den Inhalten.

Die Überschriften stammen aus Liedtexten von Hubert Kah, Wilhelm Hey, Nina Hagen, Matthias Stempfle, Herwig Mitteregger und Roger Cicero.

Kommentarbereich

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Verfolge neue Kommentare per RSS 2.0