Automatic Color Transition Effect With jQuery - Color Rotator

Color Rotator is a jQuery plugin that uses CSS3 transitions to automatically and smoothly animate an array of specified colors at a certain speed. Great for creating attractive text, background or border shadow with color transition effects.

How to use it:

1. Make sure both jQuery library and the jQuery color rotator plugin are included.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="colorrotator.js"></script>

2. Background color rotation.

$('#bg-color-rotator').colorRotator({
  colors: ['#1abc9c','#16a085','#2ecc71','#27ae60','#3498db','#2980b9'],
  property: 'background',
  random: true
});

3. Shadow color rotation.

$('#shadow-color-rotator').colorRotator({
  colors: ['#1abc9c','#16a085','#2ecc71','#27ae60','#3498db','#2980b9'],
  property: 'shadow',
  random: true
});

4. Text color rotation.

$('#text-color-rotator').colorRotator({
  colors: ['#f1c40f','#f39c12','#e67e22','#d35400','#e74c3c','#c0392b'],
  property: 'text',
  random: true
});

5. All available options with default values.

$('#selector').colorRotator({

  // an array of colors you want to use
  colors:     [],

  // 'background', 'text' or 'shadow'
  property:   '',

  // transition delay
  delay:      500,

  // random rotation
  random:     false,

  // easing 
  easing:     'linear'
  
});

6. There are a few methods that can be called after the initial colorRotator() call:

// Stop the color rotation
$('#element').colorRotator('stop');

// Start the color rotation
$('#element').colorRotator('start');

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

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

---

This awesome jQuery plugin is developed by askupasoftware. For more Advanced Usages, please check the demo page or visit the official website.