Double Rainbow is a jQuery plugin for creating subtle, mouse-aware call to action effects on target elements you define on your website such as a button or link.
It currently supports the transitioning of foreground and background colors on elements such as buttons and links/anchors as your mouse moves around the targeted element.
The goal of this plugin is to bring additional attention to a call to action on your page to improve it's conversion rate. This practice is most commonly called conversion rate optimization.
Double Rainbow is extremely easy to use. You only need to define 5 configuration options to indicate the target element's starting background and foreground color as well as the element's final, mouseover background and foreground color.
Double Rainbow will take your number of steps and determine subtle transition colors between your start and end color ranges. As you move your mouse closer or further away, Double Rainbow will adjust the colors to become more or less like your starting colors or final colors.
Actual usage of the plugin is as follows:
There are numerous configuration options included with the Form Element Repeater Plugin.
| Option Name | Details | Default Value |
|---|---|---|
startDistance |
The minimum distance from the target element and the mouse which triggers the gradient transition to occur. (integer) | 500 |
steps |
The number of gradient transition steps that will be generated between the start and
end colors. This is how many transition colors the plugin will create from
startBgColor to endBgColor. The steps represent percentage
ranges tied to a specific color gradient as you move your mouse from 0
to startDistance pixels away from the target element. (integer) |
20 |
startBgColor |
The starting HEX background color of the target element, i.e. #FF0000 for red. (string) |
'#333333' |
endBgColor |
The ending HEX background color of the target element, i.e. #00FF00 for green. (string) |
'#999999' |
startColor |
The starting HEX font color of the target element, i.e. #000000 for black. (string) |
'#CCCCCC' |
endColor |
The ending HEX font color of the target element, i.e. #FFFFFF for white. (string) |
'#FFFFFF' |
Below is an example of the default configuration option values that come with the plugin:
Downloads are available via github. The decision is all yours:
git clone [email protected]:cballou/jQuery-Double-Rainbow-Plugin.gitgit clone https://github.com/cballou/jQuery-Double-Rainbow-Plugin.gitwget https://github.com/cballou/jQuery-Double-Rainbow-Plugin/archive/master.zipwget https://github.com/cballou/jQuery-Double-Rainbow-Plugin/archive/master.tar.gzIf you have any problems with Double Rainbow, please file a ticket/issue/bug on Github and I will attempt to address it at my earliest convenience.
Caterpiller Issues on GithubDouble Rainbow is licensed under the MIT License.
The MIT License is simple and easy to understand and it places almost no restrictions on what you can do with Double Rainbow.
You are free to use Double Rainbow in commercial projects as long as any copyright headers and license file are left intact.
Corey Ballou is a full-stack web applications developer in Charlotte, NC with 9+ years professional experience. He holds a bachelors degree in Computer Science and has been working remotely since 2012. He specializes in LAMP/LEMP stack development with Laravel and WordPress. Corey is the owner and principal consultant at Craft Blue, a custom web applications development consultancy. He's also the co-organizer of the Queen City PHP meetup group in Charlotte. He is an entrepreneur, blogger, open source contributor, beer lover, startup advocate, chicken wrangler, hydroponics gardening dabbler, and homebrewer.
Corey works with agencies, startups, and businesses.
Contact Corey to see how Craft Blue can help you.