Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
103 lines (94 sloc) 3.08 KB

color-rotator Built with Grunt

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