A jQuery plugin for automatic color rotation in various CSS properties
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demos
.gitignore
LICENSE
README.md
colorrotator.js
colorrotator.min.js

README.md

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