Mit Pow.js Sonnenstrahlen generieren

Sonnenstrahlen mit Pow.js gezeichnet

Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu groß um sie als Hintergrund in eine Seite zu packen. Mir gefällt so etwas aber leider richtig gut – vor allem auf vektorisierten Designs – und deshalb schaue ich ab und an mal nach, ob das nicht doch irgendwie geht.

Sonnenstrahlen mit Pow.js gezeichnet

Jetzt gibt es ja das nette Canvas-Element, und das kann auch große Bilder schnell zeichnen und animieren. Und genau in diese Bresche springt Pow.js, das prima Sonnenstrahlen auf beliebige Container legen kann (oder besser gesagt: dahinter). Das jQuery-Plugin intergriert sich in einen beliebigen Container, erstellt einen Layer und nutzt diesen als Hintergrundgrafik. In diesen Layer packt es einen Canvas und zeichnet direkt die Strahlen. Der Aufruf ist recht einfach:

/* Try it out. */
$('div#example').pow({
  rays:          32, // positive integer > 1
  bgColorStart:  hsl(210, 100%, 90%), // any css color
  rayColorStart: hsl(210, 100%, 97%), // any css color
  bgColorEnd:    hsl(210, 100%, 60%), // any css color
  rayColorEnd:   hsl(210, 100%, 80%), // any css color
  originX:       60%,      // percentage, e.g. '33%'
  originY:       40%,      // percentage, e.g. '120%'
  originEl:      $('#foo') // any jQuery selector
});

Man bestimmt also die Position der Sonne, definiert die alternierenden Farben und wendet es auf einen Container an. das originale Element kann dann innerhalb des neuen Elements positioniert werden, das passende HTML sieht also so aus:

#foo

Wie man an der Pow.js-Homepage sieht, kann man das ganze auch ziemlich problemlos auf den <body> anwenden. Das Canvas wird auf jeden Fall schnell genug gezeichnet um einen Flash of Unstyled Content zu verhindern. Viel Spass mit dem Plugin, und wenn ihr es in einem Design einsetzt, würde es mich freuen, wenn ihr die Seite via Kommentar verlinkt! ;)

Ähnliche Beiträge

CSS Reset vs. Normalize Die Tage ging ein Aufschrei durch Twitter: die HTML5-Boilerplate hat den CSS-Reset raus geworfen, und durch ein Normalize ersetzt. Ich war relativ ers...
jsPDF – PDF-Dateien mit JavaScript erzeugen PDF-Dateien sind aus der modernen Geschäftswelt nicht mehr wegzudenken, was insbesondere bedeutet das man diese in einer Applikation erzeugen muss. PD...
TinyMCE in Version 3.2.2 veröffentlicht 4 Monate hat es gedauert, aber nun ist sie da, die neue Version von TinyMCE. Stellt sich nur die Frage, was eigentlich neu ist. Zunächst einmal ist zu...
Lint für CSS Und noch ein Lint! Über das für jQuery habe ich ja bereits berichtet, nun gibt es das Ganze auch für CSS als Webapp mit dem Namen CSS Lint. Frei nach ...

Schreibe einen Kommentar