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

Der Bild-Upload, das Design und der Kunde Im Leben eines Webworkers kann man von zwei Prämissen ausgehen : a) Kunden beherrschen keine Bildbearbeitung und b) Grafiker schaffen es nicht ein nic...
HTML5 File Upload in jQuery Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es...
Die Selektoren von jQuery erweitern Ich bin über einen recht interessanten Artikel im Blog von James Padolsey gestolpert, der nachhaltig Arbeit einsparen kann, insofern man jQuery verwen...
Catch404 – 404 mit jQuery Abfangen 404 sind eine sehr unschöne Sache, vor allem bei einer internen Verlinkung. Hier kann man aber zumindest durch Studieren der Log-Files merken, das etw...

Schreibe einen Kommentar