Mit Pow.js Sonnenstrahlen generieren

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

AutoSuggest mit jQuery Das Auto-Completing bzw. Ajax-Angetriebene Suchen werden ja im Internet immer beliebter, allerdings haben die Teile bei falscher Programmierung die An...
jwerty – JavaScript Keyboard Events vom Fein... Keyboard Events in Javascript sind in Backends das vielleicht am meisten unterschätze Feature! Wenn man mal ehrlich ist: man benutzt die Tastatur kaum...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...
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...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.