rainyday.js: Herbstliche Websites
Kommentare

Das Ergebnis, das man mit der JavaScript Library rainyday.js erzielen kann, mag eher trivial erscheinen, denn sie tut im Endeffekt nichts anderes, als Websites mit einem Regenschleier zu versehen. Die

Das Ergebnis, das man mit der JavaScript Library rainyday.js erzielen kann, mag eher trivial erscheinen, denn sie tut im Endeffekt nichts anderes, als Websites mit einem Regenschleier zu versehen. Die Technik dahinter gefällt uns aber so gut, dass wir das Projekt von Marek Brodziak hier einmal vorstellen wollen.

Es regnet, es regnet, die Website wird nass… Screenshot: http://maroslaw.github.io/rainyday.js/

Wie genau erzeugt rainday.js den Effekt, als würde man alles durch ein Fenster betrachten, auf das der Regen prasselt? Die JavaScript Library dahinter nutzt HTML5 Canvas, um die Animation zu rendern, somit läuft es auf so ziemlich jedem Browser.

Insgesamt werden für die Animation drei verschiedene Canvas-Objekte benötigt, die einen Layering-Effekt erzeugen: Der unterste Layer beinhaltet das Originalbild, skaliert auf die Größe, die das API benötigt. Die Bildinformationen werden auf das Canvas übertragen und verwischt. Der mittlere Layer ist quasi ein unsichtbares Canvas, das später als Helfer dient, wenn die Regentropfen-Effekte hinzukommen. Der Top Layer ist für die Regentropfen.

Der wohl wichtigste Aspekt der Library ist das Rendern der Regentropfen. Während das bei kleinen Tropfen noch relativ einfach von Statten geht, wird es bei großen schon komplizierter, zum Beispiel muss man darauf achten, dass die Form der Tropfen zufällig erscheint. Dafür nutzt rainyday.js einen Algorithmus.

Die Animations-Engine besteht aus drei Modulen, die jeweils vom vorherigen abhängen: dem rain module, das neue Tropfen an zufälligen Stellen auf dem Canvas positioniert, dem gravity module, das die Tropfenbewegungen auf dem Canvas modifiziert und dem trail module, das eine Folge an kleineren Tropfen implementiert.

Wer rainyday.js ausprobieren oder aktiv verwenden will, findet den Code auf GitHub.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -