Wie es so geht. Kunde X braucht schnell mal eben eine Landing Page mit einem das Browserfenster ausfüllenden Bildhintergrund. Was ist die schnellste Variante? Auf der Suche stolpere ich über das erst wenige Tage alte jQuery-Plugin Wallpaper von Ben Plum, womit die Umsetzung des Kundenwunsches letztlich in zehn Minuten erledigt ist. Die Möglichkeit, den Bild-Hintergrund auch durch ein Video ersetzen zu können, wurde auf Kundenseite mit Interesse zur Kenntnis genommen…
Wallpaper, Teil der Formstone-Bibliothek
Wallpaper ist das jüngste jQuery-Plugin aus der Werkstatt des Ben Plum, seines Zeichens Front-End-Entwickler aus Hampden in Baltimore, gelegen im US-Bundesstaat Maryland. Plum fügte Wallpaper jüngst seiner stetig wachsenden Komponenten-Sammlung namens Formstone zu. Formstone vereinigt mittlerweile 12 jQuery-Plugins, die unterschiedliche Aufgaben erledigen, aber alle mit dem Fokus auf einfache Implementierung und Anpassbarkeit ersonnen wurden. Alle Teile der Formstone-Sammlung stehen kostenfrei unter MIT-Lizenz zur privaten, wie kommerziellen Nutzung zur Verfügung. Alle Elemente werden individuell gepflegt und basieren nicht aufeinander. So ist man nicht etwa verpflichtet, die ganze Sammlung einzubinden, bloß um ein Element daraus zu verwenden.
Formstone-Komponenten werden mit dem Mobile-First-Ansatz entwickelt und sind dementsprechend sämtlich voll responsiv. Die Verwendung von Namespaces sorgt dafür, dass sich die Komponenten nicht mit Ihrem Code im übrigen ins Gehege geraten. Formstones Einzelteile sind jeweils mit Grunt kompiliert, liegen minifiziert vor, können optional mittels Bower installiert werden und funktionieren in allen modernen Browsern.
Einbau eines Wallpaper: Schneller geht es nicht
So schnell ist ein element-füllender Hintergrund gesetzt. Zunächst binden wir Wallpaper ein:
Dann definieren wir die Funktion
$("#element").wallpaper({
source: "speicherort/bildhintergrund.jpg"
});
und bestimmen den Container:
Nun wird der Container mit dem angegebenen Bild komplett gefüllt. In der Demo sieht das zum Beispiel so aus:
Fertig! Schnell genug?
In ähnlicher Art und Weise bauen Sie Videos ein, die einmalig ablaufen, loopen oder erst bei Mauskontakt beginnen. Alle Parameter werden direkt in der Funktion definiert. Callbacks erlauben es, weitere Funktionen, abhängig vom Zustand zu initiieren. Dabei ist Wallpaper gut dokumentiert. Der "Lernaufwand" beträgt etwa fünf Minuten.
Mein Kunde ist zufrieden. Ich auch…
Links zum Beitrag
- Wallpaper | Demoseite
- Wallpaper | Dokumentation
- Formstone | Website mit allen Front-End-Komponenten der Sammlung
- Wallpaper auf GitHub
- Ben Plum auf GitHub
