Rainbow Background is a small jQuery Plugin that is used to create vivid backgrounds with many styles, colors, image patterns with unique features: responsive design, auto change background styles, unlimited unique backgrounds.

What is Rainbow Background jQuery Plugin used for ?

You can use to create unique backgrounds for your sites or create image effects for your photos.

 

 

Rainbow Background jQuery

 

Rainbow Background Features:

  • Responsive Design.
  • Supports Unlimited Colors, Image Patterns.
  • Supports Full Screen Backgrounds.
  • Supports Auto Change Background Styles.
  • Make Unique Backgrounds Easily.
  • Cuztomize Cell Sizes with Unlimited Styles.
  • Light weight.
  • Easy to deploy.

 

Change Logs:

Jan 2013: First version.

 

Credits:

Rainbow Background  is developed by SONHLAB.com and used below third parties:

 

Table of Contents:

  1. Setup Rainbow Background Plugin.
  2. Call Rainbow Background Plugin.
  3. HTML Structure.
  4. Parameters.

 

 

Section 1: Setup Rainbow Background Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>.

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/rainbowbackground.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

Include Javascript files:

<!-- jQuery Library 1.8.3 -->
<script type="text/javascript" src="js/jquery/jquery.min.183.js"></script>
<!-- RainbowBackground Plugin -->
<script type="text/javascript" src="js/rainbowbackground.dev.js"></script>

Rainbow Background setup is done.

 

Section 2: Call Rainbow Background Plugin.

To call the plugin you can add below script into HEAD section:

<script type="text/javascript">
$(window).load(function(){
  $('body').rainbowbg({
    cellwidth: '60,80,100,120,128,144,168,192,200',
    cellheight: '60,80,100,120,128,144,168,192,200',
    EnableFullScreenBg: true,
    AutoChange: 0,
    BgArray:"transparent-deepsea,transparent-smoke,transparent-grass,transparent-black"
  });
});
</script>

 

Section 3: HTML Structure.

To render rainbow backgrounds just add the following HTML structures at bottom of your page ( before </body> tag ).

<!-- RAINBOW BACKGROUND -->
<div id="rb-target">    
  <div id="rb-fullscreenbg"></div>        
</div>
<!-- END RAINBOW BACKGROUND -->

 

If you want to show full screen background:

<!-- RAINBOW BACKGROUND -->
<div id="rb-target">
  <div id="rb-fullscreenbg">
    <img src="images/rainbowbg/04.jpg" alt="rainbow full screen background" />
  </div>
</div>
<!-- END RAINBOW BACKGROUND -->

 

If you want to change backgrounds:

<!-- RAINBOW BACKGROUND -->
<div id="rb-target">
  <div id="rb-fullscreenbg"><!-- -->
    <img src="images/rainbowbg/01.jpg" alt="background 1" />
    <img src="images/rainbowbg/02.jpg" alt="background 2" />
    <img src="images/rainbowbg/03.jpg" alt="background 3" />
    <img src="images/rainbowbg/04.jpg" alt="background 4" />
  </div>
</div>
<!-- END RAINBOW BACKGROUND -->

 

Done, very simple. If you want to know more detail please read demo files.

 

 

Section 4: Parameters:

Parameters Properties Description
cellwidth string This param is used to set cell width. We have 9 values for 9 screen width: 480, 640, 800, 960, 1280, 1440, 1680, 1920, 1920+.
cellheight string This param is used to set cell height. We have 9 values for 9 screen width: 480, 640, 800, 960, 1280, 1440, 1680, 1920, 1920+.
EnableFullScreenBg bolean This param is used to enable full screen images.
If you use solid color cells you can disable this params.
Value: true | false.
AutoChange integer This param is used to set time ( miliseconds ) to change cell styles or backgrounds.
If you want to disable this param you can set zero (0) number.
ChangeStyle integer This param is used to set changing style.
Value: 1: Change Cell Style, 2: Change Backgrounds.
BgArray string This param is used to set styles for cells from array. The plugin will get styles randomly from array and set it for each cell.

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to email me via Contact Form. No guarantees, but I’ll do my best to assist you. Thanks so much!

 

 

LEAVE A COMMENT
Tagged with:
 

Comments are closed.

Set your Twitter account name in your settings to use the TwitterBar Section.