Ambient and mouse over effects to individual characters.
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>
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)
});
"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