jQuery Color Rotator Plugin Examples

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
});