toddpress/Unicorn-js

make cyclic rainbow text on hover! sweet.

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

NOTE: This documentation is outdated, new docs coming soon

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.

Please try our demo: 

---

"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

Accolades

"I had given up jQuery completely. But then Unicorn.js brought me back. The sweet, pulsating rainbow of joy is a part of my daily routine now."
-Paul Irish, front-end developer & general badass

"[Todd feels] this is truly a harbinger of future web development."
-Chris Coyier, designer at CodePen & writer at CSS-Tricks

"Unicorn.js is the next evolutionary step to make the web the magical realm of sparkly beings made of light and whip cream"
-David DeSandro, of Twitter and creator of Masonry

https://mtc.cdn.vine.co/r/videos/09F9F8244A1092892368543309824_26dca596279.0.4.15267178649808893943.mp4?versionId=AjyFG1dAUCOY3bX9DMtSItne.lVYwlAC
-David Walsh, MooTools brainchild and Mozilla dev

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.

But you probably shouldn't...

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="path/to/unicorn/unicorn.js"></script>

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

<script>
    Expecto.patronum('.unicorn', {
     	'duration': '.2',
     	'bowFlow':'ltr',
        'cursor':'pointer'
    });
</script>

The dazzlingly dazzling .patronum(strClassName, objOptions) 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 (outdated)

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 Boolean 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???

I think you've got it. Go, ahead... Get your bow-flow on.