Examples

ColorRotator.js is a jQuery plugin that uses CSS3 transitions to smoothly animate various CSS color properties (i.e. background color, text color, shadow color etc.) subject to a delay. Given a list of colors (in any format acceptable to CSS), the plugin will transition between the colors once or infinitely many times, depending on the settings.
Here are a few example of what you can do with it:

Background Color

Shadow Color

Text Color

Hello, World!

Navigation Example

Different hover effect every time!

Color Range Example

Colors

The color option takes an array of colors in any type supported by CSS (Hex, RGB, RGBA, HSL, HSLA or predefined names), or an object specifying a range.

// Colors array
$('#element').colorRotator({
    colors ['#1abc9c','#16a085','#2ecc71','#27ae60'],
    property: 'background'
});

// Color range
$('#element').colorRotator({
    colors: {
        
        // Only RGB and hexadecimal colors are 
        // supported here
        from: 'rgb(52, 152, 219)',
        to: 'rgb(211, 84, 0)',
        
        // The number of colors to generate 
        // within the given range
        count: 16 
    },
    property: 'background'
});

Easing

The easing option takes a string with one of the CSS3 supported easing functions (see transition-timinig-function).

$('#element').colorRotator({
    colors: [...],
    easing: 'linear'
});

Random

The random option takes a boolean value. If random is set to true, the colors will be picked randomly from the color pool.

$('#element').colorRotator({
    colors: [...],
    random: true
});

Property

The property option takes a string with one or more properties, separated by space. The color of the given property will change according to the given colors. Supported properties:

  • background - Changes the background color
  • shadow - Changes the box-shadow color
  • text - Changes the font color

$('#element').colorRotator({
    colors: [...],
    property: 'background text'
});

Delay

The delay option represents the number of milliseconds between each transition.

$('#element').colorRotator({
    colors: [...],
    delay: 1200
});

Methods

There are a few methods that can be called after the initial colorRotator() call:

  • 'stop' - Stops the color rotation
  • 'start' - Continues the color rotation if it was stopped
  • 'update' - Updates the options with new values
  • 'colors' - Calls a function that takes the colors array as an argument

// Stop the color rotation
$('#element').colorRotator('stop');

// Update options
$('#element').colorRotator('update', {/* new options */});

// Get the colors array
$('#element').colorRotator('colors',function(colors){
    // Do something with the 'colors' array
});

Spread the word about ColorRotator.js!