Create Smooth Color Transitions With jQuery Hueristics

One of the most eye-catching elements of animation is color transitioning. It immediately catches the eyes and gives a wow effect. It is also perfect for highlighting sections of your web page, drawing user attention to specific areas on the page.

Hueristics is a tiny yet highly customizable jQuery plugin that makes it possible to smoothly transition between colors. This will be efficient for creating nice effects and transitions on websites or interfaces. It works with any DOM element with a color attribute (text color, background color. etc) and allows you to control hue, saturation, lightness, and alpha channels using JavaScript.

How to use it:

1. Download and insert the Hueristicslibrary after jQuery.

<script src="/path/to/cdn/jquery.js"></script>
<script src="/path/to/js/jquery.hueristics.js"></script>

2. Call the hueristics plugin with default params. This will change the background color of the whole page at a given speed.

$(function(){
  $('body').hueristics();
});

3. All possible params to config the color transitions.

$('body').hueristics({

  // color property
  property: 'background-color',

  // start color
  startColor: '',

  // control hue, saturation, lightness, and alpha channels here
  hue: 0,
  saturation: 100,
  lightness: 50,
  alpha: 1,

  // transition mode
  moveVal: 'hue',

  // max/min values
  maxVal: 360,
  minVal: 0,

  // transition speed
  speed: 70,

  // step size
  step: 1,

  // reverse
  reverse: false,

});

---

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