Letter Effects jQuery Plugin

Ambient and mouse over effects to individual characters.

Example Implementations

Target the parent of the text you wish of effect. The plugin with wrap the containing characters with a span element which it then styles with inline CSS.

<h1 class="randCol">Millennials in government: Interviews with our youngest public servants</h1>

$(" .randCol ").letterEffect({
        "effectValues": [ "#196518", "#8c1b1b", "#555f04", "#1b5979", "#944b10" ],
     "ambientstrength": .2,
                "time": 1
});

The above would render the following HTML.

<h1 class="randCol">
     <span class="index-0 character-M" style="color: rgb(25, 101, 24); transition: color 1.89246s ease-in-out;">M</span>
     <span class="index-1 character-i" style="color: rgb(0, 0, 0); transition: color 1.89246s ease-in-out;">i</span>
     <span class="index-2 character-l" style="color: rgb(85, 95, 4); transition: color 1.89246s ease-in-out;">l</span>
     [...]
</h1>

Randomize by word

To apply the effect by word adjust the "splitChar" parameter to a space.

$(" .randCol ").letterEffect({
        "splitChar": ' ' // seperate by spaces (each word)
});

Or by a different character.

$(" .randCol ").letterEffect({
        "splitChar": '.' // seperate by periods (each sentance)
});

Default Parameter Settings:

"splitChar"             : '',             // Groups by every letter
"effectParam"           : "color",        // CSS property to modify 
"effectValues"          : ["red", "green", "blue", "yellow"], // an array of string colour codes
"ambientAnimation"      : true,           // Enable anbient animation
"ambientstrength"       : .2,             // Percentage of affacted characters
"time"                  : .5,             // Change ambient animation every xSeconds
"drift"                 : .25,            // Amout in seconds to randomly vary animation time +/- 
"hoverAnimation"        : true,           // Enable anbient animation
"hoverTime"             : .3,             // Length of the hover transition in seconds
"hoverEase"             : "ease-in-out"   // Style of CSS transition