This time I will share jQuery Plugin and tutorial about Dynamic Color Transition Effects With jQuery – LiveColor.js, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<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
1 |
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.
1 |
setInterval(function () { |
2 |
myColorObject.colorify(); |
4. Apply the color transition effect to given text.
1 |
setInterval(function () { |
2 |
myColorObject.colorifyText(); |
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.
1 |
setInterval(function () { |
2 |
myColorObject.colorifyCustom(bottom, top, background = true); |
6. More methods. The parameters are same as the colorifyCustom() method above.
03 |
Color.saturify(bottom, top, background = true) |
06 |
Color.brightify(bottom, top, background = true) |
10 |
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.
