jQuery Plugin To Create Animated Color Transitions - Recolor

File Size: 5.81 KB
Views Total: 614
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
  color: "grey", 
  speed: "fast",

3. Create a smooth color transition effect on your text.

<p id="demo-2">Lorem ipsum dolor</p>
  effect: "ripple",
  speed: 500

4. Create a background color transition effect on a specific DIV container.

<div id="demo-3"></div>
  effect: "ripple",
  speed: 1000

5. Plugin's default options.

  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:


  • Removed drawable function.


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