Dynamic Color Transition Effects With jQuery - LiveColor.js
File Size: | 7.48 KB |
---|---|
Views Total: | 1207 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.