Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
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 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.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

adaptive_backgrounds_LP

Anzeige

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

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 erstmal eine Hintergrundfarbe gezeigt wird bis das Bild komplett da ist. Finde ich eine schöne Idee.

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

    Ich hätte gerne das Adaptive Backgrounds für WordPress :-)

  3. So eine Art von Lösung habe ich schon einmal für einen Blog entwickelt. Allerdings in PHP. Dabei habe ich das Blog-Foto genommen und auf 1×1 Pixel reduziert. Dadurch habe ich die durchschnittliche Farbe des Fotos erhalten und konnte den Pixel als Hintergrundbild einbinden.
    Die Lösung in JavaScript ist natürlich deutlich eleganter.

Schreibe einen Kommentar zu j Antworten abbrechen

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