Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 10. Januar 2014

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

Wie es so geht. Kunde X braucht schnell mal eben eine Landing Page mit einem das Browserfenster aus­fül­len­den Bildhintergrund. Was ist die schnells­te Variante? Auf der Suche stol­pe­re ich über das erst weni­ge Tage alte jQuery-Plugin Wallpaper von Ben Plum, womit die Umsetzung des Kundenwunsches letzt­lich in zehn Minuten erle­digt ist. Die Möglichkeit, den Bild-Hintergrund auch durch ein Video erset­zen zu kön­nen, wur­de auf Kundenseite mit Interesse zur Kenntnis genom­men…

formstone-landing

Wallpaper, Teil der Formstone-Bibliothek

Wallpaper ist das jüngs­te jQuery-Plugin aus der Werkstatt des Ben Plum, sei­nes Zeichens Front-End-Entwickler aus Hampden in Baltimore, gele­gen im US-Bundesstaat Maryland. Plum füg­te Wallpaper jüngst sei­ner ste­tig wach­sen­den Komponenten-Sammlung namens Formstone zu. Formstone ver­ei­nigt mitt­ler­wei­le 12 jQuery-Plugins, die unter­schied­li­che Aufgaben erle­di­gen, aber alle mit dem Fokus auf ein­fa­che Implementierung und Anpassbarkeit erson­nen wur­den. Alle Teile der Formstone-Sammlung ste­hen kos­ten­frei unter MIT-Lizenz zur pri­va­ten, wie kom­mer­zi­el­len Nutzung zur Verfügung. Alle Elemente wer­den indi­vi­du­ell gepflegt und basie­ren nicht auf­ein­an­der. So ist man nicht etwa ver­pflich­tet, die gan­ze Sammlung ein­zu­bin­den, bloß um ein Element dar­aus zu ver­wen­den.

Formstone-Komponenten wer­den mit dem Mobile-First-Ansatz ent­wi­ckelt und sind dem­entspre­chend sämt­lich voll respon­siv. Die Verwendung von Namespaces sorgt dafür, dass sich die Komponenten nicht mit Ihrem Code im übri­gen ins Gehege gera­ten. Formstones Einzelteile sind jeweils mit Grunt kom­pi­liert, lie­gen mini­fi­ziert vor, kön­nen optio­nal mit­tels Bower instal­liert wer­den und funk­tio­nie­ren in allen moder­nen Browsern.

Einbau eines Wallpaper: Schneller geht es nicht

So schnell ist ein ele­ment-fül­len­der Hintergrund gesetzt. Zunächst bin­den wir Wallpaper ein:

%MINIFYHTML8120ec36a063ef64352422e1c751270511%

Dann defi­nie­ren wir die Funktion

$("#element").wallpaper({
	source: "speicherort/bildhintergrund.jpg"
});

und bestim­men den Container:

Nun wird der Container mit dem ange­ge­be­nen Bild kom­plett gefüllt. In der Demo sieht das zum Beispiel so aus:

formstone-wallpaper

Fertig! Schnell genug?

In ähn­li­cher Art und Weise bau­en Sie Videos ein, die ein­ma­lig ablau­fen, loo­pen oder erst bei Mauskontakt begin­nen. Alle Parameter wer­den direkt in der Funktion defi­niert. Callbacks erlau­ben es, wei­te­re Funktionen, abhän­gig vom Zustand zu initi­ie­ren. Dabei ist Wallpaper gut doku­men­tiert. Der “Lernaufwand” beträgt etwa fünf Minuten.

Mein Kunde ist zufrie­den. Ich auch…

Links zum Beitrag

Dieter Petereit

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.

5 Kommentare

  1. Mal eine Frage dazu: Warum ist die Bildvorlage qua­dra­tisch, wo sie doch als lan­ges Rechteck aus­ge­ge­ben wird?

  2. Vor eini­gen Jahren hat­ten wir auch das Plugin Supersized vor­ge­stellt. Hier noch­mal der Link:

    http://www.drweb.de/magazin/jquery-plugin-supersized-autoskalierender-background-mit-slideshow-option/

  3. Coole Sache. Aber ist das mit­tels CSS (background-size:cover;) nicht noch schnel­ler?
    Abgesehen davon, das damit vmtl. kei­ne Videos gehen.

    • Noch schnel­ler ist es mit CSS nicht. Hat ja mehr Codeaufwand. Und Videos gehen gar nicht. Zudem lässt sich Wallpapers para­me­tri­sie­ren und zu wei­te­ren Funktionsaufrufen nut­zen. Das geht mit rei­nem CSS nicht. Insofern: Wallpapers ist fle­xi­bler.

  4. Bilder kann man auch easy mit css über den kom­plet­ten Viewport/Container stre­cken:

    -web­kit-back­ground-size: cover;
    -moz-back­ground-size: cover;
    -o-back­ground-size: cover;
    back­ground-size: cover;

Schreibe einen Kommentar

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