Create Smooth Color Transitions With jQuery Hueristics
File Size: | 387 KB |
---|---|
Views Total: | 381 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.