jQuery Plugin To Create Animated Color Transitions - Recolor

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.