ChameleonBackgrounds
A jQuery library to dynamically load background elements. See live demo's at http://chameleonbackgrounds.com
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 fadeIn effect by using the CSS transition-duration property.
Basic Usage
See the snippets below for basic usage, use type "single" for a single background image and type "slider" for a slideshow.
Type Single
<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>
Note: Initializing on element "body" can cause some bugs when there are footer scripts present, read about it in Additional information
Type Slider
<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>
Options
Type 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 miliseconds! | yes |
Type 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 miliseconds! | yes |
| slider_duration | The slider duration, the time the image is shown count starts when the transition duration is past, serve value in miliseconds! | yes |
| slider_loop | Slider loop, set to true if you want the slider to auto restart on finish. | yes |
Additional information
Element body: When ChameleonBackgrounds gets initialized it'll add 2 new elements to create the fadein 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 into a new html element, if the body contains footerscripts 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.
Method1
<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
<script> if(background.bodyReplaced){ /* Your script here */ } </script>
Method2
<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, allmost every images has diffrent 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 https://.transparenttextures.com