Background Color Transitions with jQuery and CSS3 - Spectrum

Spectrum is an ultralight (~2kb) jQuery plugin that allows you to apply smooth transition effects on the background color of a specific container using CSS3.

See also:

• jQuery Plugin To Dynamically Change Background Colors - bgcFade

How to use it:

1. Include jQuery library and the spectrum.js script on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.spectrum.js"></script>

2. Create a container with the CSS ID 'spectrumPlugin'.

<header id="spectrumPlugin">
  ... content here ...
</header>

3. Call the plugin on the container.

$('header').spectrum();

4. Set the initial background color and the color transitions.

header {
  width: 100%;
  height: 100%;
  background-color: #7189FF;
  transition: background-color 4s ease;
}

5. Change the default colors and transition interval in the jquery.spectrum.js

// Array of Colours
var colourArray = [

// Colour 1 - Orange
  {
      src: 'colour1',
      colour: 'rgb(252,115,49)'
  },

  // Colour 2 - Pink
  {
      src: 'colour2',
      colour: 'rgb(236,0,140)'
  },

  // Colour 3 - Yellow
  {
      src: 'colour3',
      colour: 'rgb(241,196,15)'
  },

  // Colour 4 - Green
  {
      src: 'colour4',
      colour: 'rgb(95,178,106)'
  },

  // Colour 5 - Blue
  {
      src: 'colour5',
      colour: 'rgb(113,137,255)'
  }
];

//Use set interval to go through our colourArray
//Each interval change the background colour of the element 
//Plugin is on, and increment the index.
setInterval(function() {
  //Change background of selected $element to be 
  //colourArray[index]
  //Increment index
  index = index + 1;
  //Make sure that index is not larger than the length of the colourArray
  //If so,
},4000);

Change log:

2015-03-20

• Refinements, Favicons, & Media Query Edits

---

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