Download ChameleonBackgrounds.js

See the snippet below for basic usage

ChameleonBackgrounds was created by Lennart from WebVerder
I essentially created this plugin to withhold large background image files from the initial load. This would not only improve loading times but also meant that we could show the background image when it's actually fully loaded. Therefore I created a simple overlay that creates a fade-In effect by using the CSS transition-duration property.

Github

jQuery
CSS
HTML
<script> 
  var options = { 
      element: 'body', 
      type: 'single', 
      src: './img/chameleon.jpg', 
      overlayColor: '#0f1e25', 
      overlayImage: './img/transparent-tile.png', /* Optional */
      minOverlay: '0.5', /* Optional, Default='0'; */ 
      transition_duration: 2000 
  } 

  background = new ChameleonBackgrounds(options); 
</script><style> 
  /* On the body element no css is required, this is all optional! */
  body { 
    padding-top: 64px; 
    background-size: cover; 
    background-repeat: no-repeat; 
  } 
</style><html> 
 <body> 
   <!-- Nothing special happening here! --> 
 </body> 
</html>

Initializing on element "body" can cause some bugs, read about it here

Create beautiful background "sliders" on any element

See the snippet below on how to create a "slider" like this

jQuery
CSS
HTML
<script> 
  var options = { 
      element: '#bckoverlay-sample', 
      type: 'slider', 
      src: [ 
        './img/image1.jpg', 
        './img/image2.jpg', 
      ], 
      overlayColor: '#656946', 
      overlayImage: './img/transparent-tile.png', /* Optional */
      minOverlay: '0.6', /* Optional, Default='0'; */ 
      transition_duration: 3000, 
      slider_duration: 4000, 
      slider_loop: true 
  } 

  background = new ChameleonBackgrounds(options); 
</script><style> 
 /*
  * Only "position: relative;" is required other css is optional!
  */
  #bckoverlay-sample {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
  }
</style> <section id="bckoverlay-sample"> 
   <!-- Nothing special happening here! --> 
 </section>

Creating a "slider" like the one above is fairly easy, create a new option object and add in the source urls in a array.

Set all other required options and call the ChameleonBackgrounds object.
To see which options are required go here.

Want to reload a single background image on an event ?

jQuery
<script> 
    $('#reloadBckgrd').on('click', function(){
      var imgsrc = $('.imgurl').val();
      background.reloadBackground(imgsrc);
    }); 
</script>

Really on any element ?
Yes!!! look at these awesome links/buttons =D

So much WoW!

jQuery
CSS
HTML
<script> 
  var options = { 
      element: '.awesomeBtn.first', 
      type: 'slider', 
      src: [ 
        './img/image1.jpg', 
        './img/image2.jpg', 
      ], 
      overlayColor: '#656946', 
      overlayImage: './img/transparent-tile.png', /* Optional */
      minOverlay: '0.1', /* Optional, Default='0'; */ 
      transition_duration: 3000, 
      slider_duration: 6000, 
      slider_loop: true 
  } 

  awesomeBtn1 = new ChameleonBackgrounds(options); 
</script><style> 
 /*
  * Only "position: relative;" is required other css is optional!
  */
  .awesomeBtn {
    position: relative;
    display: inline-block;
    background-size: cover;
    background-position: left;
    color: #ececec;
    border: 3px solid #656946;
    overflow: hidden;
    width: 100%;
  }
</style><html> 
 <a href="#" class="awesomeBtn first"><span>So much WoW!</span></a> 
</html>

Single

Option	Info	Required
element	ChameleonBackgrounds will initialize on this element. Examples: "body", "#htmlid", ".htmlclass"	Yes
type	The type can either be "single" or "slider".	Yes
src	The image source, on type "single" this has to be a string to the path/url of the image.	Yes
overlayColor	The overlay color for the background loader, can be in HEX,RGBA or HSLA. Examples: "#656946", "rgb(101, 105, 70)"	Yes
overlayImage	The overlay background(pattern) for the background loader, completely optional but gives great effect combined with a transparent pattern!	No
minOverlay	The minimum overlay value, is used to prevent the overlay from completely fading out combined with the overlayColor and overlayImage this can create amazing effects! Optional Default=0	No
transition_duration	The transition duration, the time it takes for the overlay to fadeout, serve value in milliseconds!	Yes

Slider

Option	Info	Required
element	ChameleonBackgrounds will initialize on this element. Examples: "body", "#htmlid", ".htmlclass"	Yes
type	The type can either be "single" or "slider".	Yes
src	The image source, on type "slider" this has to be an array with paths/urls to the images.	Yes
overlayColor	The overlay color for the background loader, can be in HEX,RGBA or HSLA. Examples: "#656946", "rgb(101, 105, 70)"	Yes
overlayImage	The overlay background(pattern) for the background loader, completely optional but gives great effect combined with a transparent pattern!	No
minOverlay	The minimum overlay value, is used to prevent the overlay from completely fading out combined with the overlayColor and overlayImage this can create amazing effects! Optional Default=0	No
transition_duration	The transition duration, the time it takes for the overlay to fadeout, serve value in milliseconds!	Yes
slider_duration	The slider duration, the time the image is shown count starts when the transition duration is past, serve value in milliseconds!	Yes
slider_loop	Slider loop, set to true if you want the slider to auto restart on finish.	Yes

Additional information

body

When ChameleonBackgrounds gets initialized it'll add 2 new elements to create the fade-in effect, 1 of these elements is used to wrap around the existing html. If it gets initialized on the body element it'll try to wrap all html in the <body> into a new html element, if the body contains footer-scripts they'll get moved and therefore recalled. Calling a script twice can cause bugs therefore when initializing ChameleonBackgrounds on the <body> use on of the methods below to load other footer scripts.

HTML <body></body>
<script src="inc/js/jquery-3.1.1.min.js"></script> 
<script src="inc/js/chameleonbackgrounds.js"></script> 
<script> 
  background = new ChameleonBackgrounds();
</script> 
<script src="inc/js/your-footerscript.js"></script>

Inside your-footerscript.js wrap all code in an if statement like the snippet below

JS [your-footerscript.js]
<script> 
  if(background.bodyReplaced){
    /* Your script here */
  }
</script>

Or use the following method:

HTML <body></body>
<script src="inc/js/jquery-3.1.1.min.js"></script> 
<script src="inc/js/chameleonbackgrounds.js"></script> 
<script> 
  background = new ChameleonBackgrounds();
  if(background.bodyReplaced){
    /* Use getScript to load your JS file */
    $.getScript('inc/js/your-footerscript.js');
  }
</script>

Use transparent patterns as overlayImage

We love to use transparent patterns as overlayImages, these transparent patterns combined with the overlayColor and minOverlay can create amazing effects. Take our site for example, almost every images has different colors but because of the green overlayColor in combination with the minOverlay and overlayImages it looks like every image is part of the design.

Looking for some awesome transparent patterns ?
We love the patterns on transparenttextures.com