Change Background Color Based On Image Color - jQuery fillcolor

Change Background Color Based On Image Color - jQuery fillcolor
File Size: 16.1 KB
Views Total: 6566
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery plugin that dynamically changes the background color based on the average color got from a specific image within your container.

See also:

How to use it:

1. Include the latest version of jQuery library and the jQuery fillcolor plugin's script on the html page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fillcolor.js"></script>

2. Wrap the image into a container as this:

<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=10">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=20">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=100">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=99">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=113">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=155">
</div>

3. Just call the function fillColor() on the container element and the plugin will do the rest.

$(function () {
  $('.js-fillcolor').fillColor();
});

This awesome jQuery plugin is developed by WEACOMRU. For more Advanced Usages, please check the demo page or visit the official website.