Dynamic Color Transition Effects With jQuery - LiveColor.js

LiveColor.js jQuery plugin which provides several methods to apply customizable color/opacity/brightness transitions to your background or text.

Basic usage:

1. To get started, you first need to load the LiveColor.js script after loading jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="livecolor-v1.0.2.js"></script> 

2. Create a new 'Color' object to create custom colors for the color transitions. Available parameters:

• angle: between 0 and 360
• element: target element
• saturation: between 0 and 100
• darkness: between 0 and 100
• opacity: between 0.0 and 1.0 

var myColorObject = new Color(angle, element, saturation, darkness, opacity);

3. Apply the color transition effect to a given container. You can use whatever time interval you want.

setInterval(function () {
 myColorObject.colorify();
}, 100);

4. Apply the color transition effect to given text.

setInterval(function () {
 myColorObject.colorifyText();
}, 100);

5. Customize the color transition effect using the colorifyCustom() method. Available parameters:

• bottom: the bottom angle value of the color wheel. Between 0 and 360.
• top: the top angle value of the color wheel. Between 0 and 360.
• background: determine whether the background color is being changed, or the text color.

setInterval(function () {
 myColorObject.colorifyCustom(bottom, top, background = true);
}, 100);

6. More methods. The parameters are same as the colorifyCustom() method above.

// Makes the element's saturation level fluctuate according to the bottom and top parameters.
// Parameters bottom and top must be between 0 and 100
Color.saturify(bottom, top, background = true)

// Fluctuates the brightness of the element.
Color.brightify(bottom, top, background = true)

// Fluctuates the opacity/transparency of the element.
// Parameters bottom and top must be between 0 and 1.0
Color.opacify(bottom, top, background = true)

---

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