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

Stets passend: Adaptive Backgrounds für jQuery färbt Websites automatisch ein

Dieses jQuery-Plugin ist ein Knüller. Adaptive Backgrounds von Brian Gonzalez ana­ly­siert ein­ge­bun­de­ne Bilder hin­sicht­lich der ver­wen­de­ten Farben, bestimmt die jeweils domi­nan­te und färbt den Hintergrund des das Bild ent­hal­ten­den Elements auto­ma­tisch in eben die­ser Farbe ein. Da Adaptive Backgrounds sich stets auf das Eltern-Element aus­wirkt, sind belie­big vie­le ver­schie­de­ne Hintergründe auf der glei­chen Seite mög­lich. Die Effekte sind beein­dru­ckend.

adaptive_backgrounds_LP

Adaptive Backgrounds für jQuery: Harmonische Farbpalette vollautomatisch

Wer Adaptive Background ein­setzt, erhält eine Art Ambi-Light für Websites. Ambi-Light, wenn ich mich recht erin­ne­re von Philips, ist eine in der Farbe vari­ie­ren­de Beleuchtung, die hin­ter dem Fernseher die Wand bestrahlt. Die Farbe wird jeweils aus dem Fernsehbild extra­hiert. Das soll das Seherlebnis stei­gern. Bislang konn­te mich das Konzept am Fernseher eher nicht über­zeu­gen.

Ganz anders sieht das auf Websites aus, wobei es natür­lich hier ganz auf das Projekt ankommt. Mit Adaptive Backgrounds kön­nen Sie Hintergrundfarben auto­ma­tisch aus den ver­wen­de­ten Bildern zie­hen und anzei­gen las­sen. Die Demoseite zum Plugin ist ein schö­nes Beispiel dafür, wie aus­ge­spro­chen anspre­chend so etwas aus­se­hen kann.

adaptive_backgrounds_EXPL
Adaptive Backgrounds extra­hiert kor­rekt den Grünton aus dem Bild und wen­det ihn auf den Hintergrund an

Dabei ist der Einsatz abso­lut sim­pel. Haben Sie jQuery und das Script in Ihr Projekt ein­ge­bun­den, star­ten Sie es so:

$(document).ready(function(){
  $.adaptiveBackground.run()
});

Von jetzt an schaut das Script nach Bildern, die mit dem Data-Attribut data-adaptive-background aus­ge­stat­tet sind. Das Data-Attribut wird an das IMG-Tag gehängt:

Über eine Variable, etwa defaults kann das Verhalten des Plugins näher gesteu­ert wer­den. Das ist immer dann erfor­der­lich, wenn man etwa nicht das direk­te Eltern-Element in der Hierarchie anspre­chen will oder wenn bestimm­te Textfarben bei­be­hal­ten wer­den sol­len. Die Variable wird dann dem Run-Befehl ange­hängt:

$.adaptiveBackground.run(defaults)

Da das Plugin mit canvas und ImageData arbei­tet, kann es ohne wei­te­res nur Bilder ver­ar­bei­ten, die auf der auf­ru­fen­den Domain gehos­tet sind. Zusätzlich zur Behandlung von IMG-Tags ist Adaptive Backgrounds über das zusätz­li­che Data-Attribut data-ab-css-background auch in der Lage, per CSS ein­ge­steu­er­te Hintergrundbilder zu ver­ar­bei­ten. Das sieht etwa so aus:

Bilder, die nicht ihre jewei­li­gen Eltern-Elemente ver­fär­ben sol­len, stat­tet man schlicht nicht mit dem Data-Attribut aus. Einfacher geht es nicht, wie ich fin­de.

Links zum Beitrag

  • Adaptive Backgrounds | Demo
  • Adaptive Backgrounds | Github
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. Das kennt man ja von Pinterest, wo beim Laden der Bilder erst­mal eine Hintergrundfarbe gezeigt wird bis das Bild kom­plett da ist. Finde ich eine schö­ne Idee.

  2. Deine PHP Lösung ist aber auch gar nicht schlecht gedacht.^^

    Ich hät­te ger­ne das Adaptive Backgrounds für WordPress :-)

  3. So eine Art von Lösung habe ich schon ein­mal für einen Blog ent­wi­ckelt. Allerdings in PHP. Dabei habe ich das Blog-Foto genom­men und auf 1x1 Pixel redu­ziert. Dadurch habe ich die durch­schnitt­li­che Farbe des Fotos erhal­ten und konn­te den Pixel als Hintergrundbild ein­bin­den.
    Die Lösung in JavaScript ist natür­lich deut­lich ele­gan­ter.

Schreibe einen Kommentar

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