Adaptive Backgrounds, un arrière-plan assorti avec jQuery

15 décembre 2013

Adaptive Backgrounds est un plugin jQuery qui permet d’assortir le background de votre site avec les images que vous aurez préalablement définies : la technique consiste à extraire la couleur dominante de l’image et de l’appliquer sur l’arrière-plan de son élément parent.

Des couleurs en harmonie

Le plugin cible toutes les images qui possèdent l’attribut data-adaptive-background, attribut personnalisé HTML5 qui permet de stocker une donnée associée à la balise HTML courante. Une fois la couleur dominante récupérée, le script applique la propriété CSS background-color sur l’élément parent de l’image.

adaptive_background_color

Deux options sont disponibles pour modifier le sélecteur d’image (par défaut data-adaptive-bacground=’1′) et le sélecteur de l’arrière-plan (par défaut le parent le plus proche), ainsi qu’un événement déclenché lorsque la couleur dominante de l’image est trouvée, qui retourne la couleur principale, ainsi que la palette de couleurs contenue dans l’image.

backgroud_color_jquery

Exemple avec 6 images et leurs fonds colorés

Mise en place du script

Le plugin Adaptive Backgrounds est très simple à mettre en place puisqu’il suffit d’inclure jQuery et le script, et d’utiliser l’attribut data-* par défaut (data-adaptive-background avec la valeur 1) ou celui que vous aurez défini dans les options, sur les images que vous voulez « scanner » :

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.adaptive-background.js"></script>
<img src="/image.jpg" data-adaptive-background='1'>

Puis on termine avec l’appel du plugin :

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

À noter que Adaptive Backgrounds fonctionne uniquement avec des images qui sont stockées sur le domaine courant.

Requis : jQuery
Compatibilité : Non communiqué
Démonstration : http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
GitHub : https://github.com/briangonzalez/jquery.adaptive-backgrounds.js
Licence : MIT

Commentaires