Kategorien
JavaScript & jQuery Programmierung

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

Dieses jQuery-Plugin ist ein Knüller. Adaptive Backgrounds von Brian Gonzalez analysiert eingebundene Bilder hinsichtlich der verwendeten Farben, bestimmt die jeweils dominante und färbt den Hintergrund des das Bild enthaltenden Elements automatisch in eben dieser Farbe ein. Da Adaptive Backgrounds sich stets auf das Eltern-Element auswirkt, sind beliebig viele verschiedene Hintergründe auf der gleichen Seite möglich. Die Effekte sind beeindruckend.

adaptive_backgrounds_LP

Adaptive Backgrounds für jQuery: Harmonische Farbpalette vollautomatisch

Wer Adaptive Background einsetzt, erhält eine Art Ambi-Light für Websites. Ambi-Light, wenn ich mich recht erinnere von Philips, ist eine in der Farbe variierende Beleuchtung, die hinter dem Fernseher die Wand bestrahlt. Die Farbe wird jeweils aus dem Fernsehbild extrahiert. Das soll das Seherlebnis steigern. Bislang konnte mich das Konzept am Fernseher eher nicht überzeugen.

Ganz anders sieht das auf Websites aus, wobei es natürlich hier ganz auf das Projekt ankommt. Mit Adaptive Backgrounds können Sie Hintergrundfarben automatisch aus den verwendeten Bildern ziehen und anzeigen lassen. Die Demoseite zum Plugin ist ein schönes Beispiel dafür, wie ausgesprochen ansprechend so etwas aussehen kann.

adaptive_backgrounds_EXPL
Adaptive Backgrounds extrahiert korrekt den Grünton aus dem Bild und wendet ihn auf den Hintergrund an

Dabei ist der Einsatz absolut simpel. Haben Sie jQuery und das Script in Ihr Projekt eingebunden, starten Sie es so:

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

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


Über eine Variable, etwa defaults kann das Verhalten des Plugins näher gesteuert werden. Das ist immer dann erforderlich, wenn man etwa nicht das direkte Eltern-Element in der Hierarchie ansprechen will oder wenn bestimmte Textfarben beibehalten werden sollen. Die Variable wird dann dem Run-Befehl angehängt:

$.adaptiveBackground.run(defaults)

Da das Plugin mit canvas und ImageData arbeitet, kann es ohne weiteres nur Bilder verarbeiten, die auf der aufrufenden Domain gehostet sind. Zusätzlich zur Behandlung von IMG-Tags ist Adaptive Backgrounds über das zusätzliche Data-Attribut data-ab-css-background auch in der Lage, per CSS eingesteuerte Hintergrundbilder zu verarbeiten. Das sieht etwa so aus:

Bilder, die nicht ihre jeweiligen Eltern-Elemente verfärben sollen, stattet man schlicht nicht mit dem Data-Attribut aus. Einfacher geht es nicht, wie ich finde.

Links zum Beitrag

  • Adaptive Backgrounds | Demo
  • Adaptive Backgrounds | Github