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

Tooltips in 100% CSS Tooltips sind inzwischen in jeder Web-Applikation zu finden, einfach um dem Benutzer mehr Informationen zu geben oder besser zu führen. Bei ganz windi...
PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
Einfaches Sortieren von Tables mit jQuery Tabellen sind so etwas wie das persönliche Waterloo des Web-Entwicklers. Verpönt für das Design führt gerade im Backend in der Regel kein Weg an dem H...
jQuery Logger – Loggen / Debuggen in jQuery Loggen / Debuggen von JavaScript ist so eine Sache. Alert fällt komplett hinten raus, console.log geht nicht im Internet Explorer, und alles in allem ...

Schreibe einen Kommentar

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