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 Refresh ohne Reload, dafür mit JavaScript Seien wir doch mal ehrlich, was ist die am meisten genutzte Taste auf eurer Tastatur? Richtig! F5 - Reload! ;) Das nervige Reloaden einer Seite kann d...
Typeahead – Auto-Complete von Twitter Wenn man in der letzten Zeit eine Sau durch das Dorf getrieben hat, dann war das wohl suggestive Vorschläge bei Formularen. Lustigerweise gibt es die ...
Adobe Brackets – Code Editor für HTML, CSS &... Nach gefühlten 25 Jahren, dem Plattmachen von Homesite und einigen Versuchen Dreamweaver irgend etwas sinnvolles abzugewinnen glaubt jetzt wohl schein...
TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...

Schreibe einen Kommentar