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 colorshadow
- Changes the box-shadow colortext
- 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 });