jQuery Plugin To Create Animated Color Transitions - Recolor
File Size: | 5.81 KB |
---|---|
Views Total: | 603 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Recolor is a jQuery plugin which applies smooth color transitions to any html elements such as text, DIVs, tables and many more.
How to use it:
1. Just include the jQuery Recolor plugin's script after jQuery library and we're ready to go.
<script src="//code.jquery.com/jquer.min.js"></script> <script src="jquery-recolor.js"></script>
2. Create a 'color blink' effect on your text.
<p id="demo-1">Lorem ipsum dolor</p>
$('#demo-1').recolor({ color: "grey", speed: "fast", });
3. Create a smooth color transition effect on your text.
<p id="demo-2">Lorem ipsum dolor</p>
$('#demo-2').recolor({ effect: "ripple", speed: 500 });
4. Create a background color transition effect on a specific DIV container.
<div id="demo-3"></div>
$('#demo-3').recolor({ effect: "ripple", speed: 1000 });
5. Plugin's default options.
$('#demo').recolor({ color: "blue", width: "4px", lineWidth: 15, lineJoin: 'round', lineCap: 'round', shape: "line", // or circle shadowOffsetX: "12px", shadowOffsetY: "12px", shadowBlur: 10, shadowColor: 'rgb(0, 0, 0)' });
Change log:
2016-11-15
- Removed drawable function.
2016-10-30
- JS update
This awesome jQuery plugin is developed by adamatyork. For more Advanced Usages, please check the demo page or visit the official website.