color-rotator

This plugin 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 acceptible to CSS), the plugin will transition between the colors once or infinitely many times, depending on the settings.

Basic Example

$('#element').colorRotator({   colors: ['#3498db','#2980b9','#2ecc71','#27ae60'],   property: 'background',   easing: 'linear',   random: true,   delay: 500 // In milliseconds });

Available Options

colors [array|object]

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

property [string]

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 [number]

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

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

random [boolean]

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

easing [string]

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

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

Available Methods

start()

Continues the color rotation if it was stopped.

$('#element').colorRotator('start');

stop()

Stops the color rotation.

$('#element').colorRotator('stop');

update()

Updates the options with new values.

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

colors()

Calls a function that takes the colors array as an argument.

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