paulirish / unicorn-js

make cyclic rainbow text on hover! sweet.

Unicorn.js, a jQuery plugin for sweet cyclic rainbow text!

Carve hours from development time with unicorn.js! This revolutionary JQuery plug-in not only applies rainbow colors to elements' text, but also animates these colors upon hover in a direction of your choosing! No longer must you worry about rolling you own solution to this commonplace front-end task; just sit back, relax, and let unicorn.js take the wheel.

---

"I truly feel that Unicorn.js is to become as commonplace as reset.css in web development. As its usage grows rampantly, I will undoubtedly be hailed as the Sir Isaac Newton of HTML Elements"
-Todd, creator

All this functionality must come with a price, no?

In short, NO!. After much soul-searching -- and rejections from Code Canyon -- I decided to release this web development panacea free of charge. You heard right, folks... FREE!!!

I'm sold, but how do get started with Unicorn.js

Lucky for you, implementation is simple.

After including JQuery 1.7+, simply download and include unicorn.js. For example, let's consider adding the following just before your closing </body> tag:

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/unicorn/unicorn.js"></script>

With the brunt of the work done, simply add another script block below the preceding two:

<script>
$(function() {
    $(".awesome_text").unicorn();
});
</script>

The dazzlingly dazzling unicorn() method will attach mouse event handlers to the selected elements. Now when hovered, the target element's text color animates, becoming an irresistible swirling spectacle of cyclic rainbow splendor!!!

That's great, but what if I require a bit more versatility?

You're in luck! Unicorn is a shining beacon for versatility in plugin authoring.

Options

1. Saturation
   • changes the intensity of colours
   • accepts integer values between 1 and 100
2. Light
   • reflects the colours' brightness
   • accepts integer values between 1 and 100
   • defaults to 50, as values of 100 will produce solid white text
3. Speed (ms)
   • the length of one cycle
   • accepts integer values representing ms (1s = 1000ms)
4. ltr
   • specifies the direction of "bow-flow," standing for `left to right`
   • accepts binary value of true or false
   • defaults to false, so bow-flow is right to left

Let's examine the following:

<script>
$(function() {
    $(".awesome_text").unicorn({
        "saturation":100,
        "light":60,
        "speed":50,
        "ltr":true
    });
});
</script>

Now, that's a beauty!

What're you waiting for??? It's time to get your Bow-Flow on!!!