Wallpaper für jQuery erlaubt die Einbindung von Bild- und Video-Hintergründen auf einfachste Weise

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

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…

formstone-landing

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:

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

formstone-wallpaper

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

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

5 Kommentare auf "Wallpaper für jQuery erlaubt die Einbindung von Bild- und Video-Hintergründen auf einfachste Weise"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Anna Blume
Gast

Mal eine Frage dazu: Warum ist die Bildvorlage quadratisch, wo sie doch als langes Rechteck ausgegeben wird?

Konrad
Gast

Coole Sache. Aber ist das mittels CSS (background-size:cover;) nicht noch schneller?
Abgesehen davon, das damit vmtl. keine Videos gehen.

martin z.
Gast

Bilder kann man auch easy mit css über den kompletten Viewport/Container strecken:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

wpDiscuz