CSS3D Clouds: Animierte Wolken mit CSS3 und JavaScript

Entwickler Jaume Sánchez aka Spite stellt ein kleines Projekt vor, das visuell durchaus beeindruckt. Unter dem Titel CSS33D Clouds präsentiert er eine mittels HTML5, JavaScript und vor allem CSS3 animierte Wolkenwelt, die nicht zuletzt die Fans der Transformer-Filme begeistern dürfte. Inspirieren liess sich Spite nach eigenen Angaben im Wesentlichen durch die WebGL-Demo Clouds von Mr. Doob, der sich als Autor der JavaScript 3D-Engine Three.js in Entwicklerkreisen einiger Bekanntheit erfreut.

Abb. 1: Jaume Sánchez Demo CSS3D Clouds zeigt eine Wolkenwelt auf der Basis von HTML5, CSS3 und JavaScript

Anders als Mr. Doob setzt Spite jedoch nicht auf WebGL, sondern verwendet reine CSS 3D Transforms, was sich vor allem in gesteigerter Performance im Vergleich zu WebGL bemerkbar macht. Zudem erlauben 3D Transforms direkte, native Interaktionen, sowie das Einbetten von DOM-Elementen. Wie sich das auswirkt, hat kürzlich Steven Wittens auf seinem Blog Acko.net im Blogpost „Making Love To Webkit“ ausführlich gezeigt und beschrieben. Sein gesamtes Blogdesign stellt sich als 3D-Modell dar.

Abb. 2: Inspirationsquelle für CSS3D Cloud: Mr. Doobs WebGL-Clouds

Während Wittens in Sachen JavaScript auf Mr. Doobs Three.js setzt, entschied sich Spite für eine Eigenproduktion. Spites Code fällt natürlich deutlich schmaler aus, eignet sich aber wegen des klaren Fokus auf genau die Arbeit, die die Demo leisten können soll, besser als Anschauungsobjekt für den interessierten Entwickler. Das gesamte Projekt steht als schlanke Zip-Datei von rund 500 Kb im Mozilla Developer Network zum Download bereit. Spite fügt neben den verwendeten PNG-Dateien insbesondere die index.html, die unter anderem das gesamte erforderliche JavaScript enthält, sowie die begleitende CSS-Datei, bei.

Abb. 3: CSS3D Clouds: Die Effekte-Wunschbox

CSS3D Clouds funktioniert im Firefox, sowie in Chrome und Safari. Spite kommt mit erstaunlich wenig browserspezifischem Code aus. Innerhalb der Demo lassen sich die Effekte über vorkonfigurierte Presets wählen. Für Action-Fans empfiehlt sich das Preset „Michael Bay“. Über „Show Texture Controls“ kann man sich abseits der Voreinstellungen sein eigenes Effekte-Set nach Wunsch zusammen klicken. Bewegt man die Maus über die Wolkenwelt dreht sich diese, das Mausrad dient zum Ein- und Auszoomen. Eine frische Cloud generiert man mittels Druck auf die Leertaste.

(do)