Double Rainbow jQuery Call to Action Plugin

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.

Fork me on GitHub

Usage

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:

  1. Ensure you have jQuery ~1.9.2 or equivalent loaded on your page.
  2. Using the example below, plug in your own configuration parameters:

Configuration Options

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

Downloads are available via github. The decision is all yours:

  • git clone git@github.com:cballou/jQuery-Double-Rainbow-Plugin.git
  • git clone https://github.com/cballou/jQuery-Double-Rainbow-Plugin.git
  • wget https://github.com/cballou/jQuery-Double-Rainbow-Plugin/archive/master.zip
  • wget https://github.com/cballou/jQuery-Double-Rainbow-Plugin/archive/master.tar.gz
Download as .zip Download as .tar.gz

Support

If 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 Github

License

Double 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.

Changelog

  • May 6, 2016
    Addition of MIT licensing.
  • Nov 3, 2012
    Improving plugin README documentation.
  • Jan 8, 2012
    Conversion of the repository into a jQuery plugin.
  • Dec 9, 2011
    Initial commit of Double Rainbow on github.

About the Author

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.