Random Smooth Text Ambient Animations With jQuery - Letter Effects

Letter Effects is a very small jQuery plugin which helps apply random smooth ambient animations and hover effects to individual characters. It uses CSS3 transitions for smooth animations. The goal is to put each character in its own element (span) in order to style/animate them individually.

How to use it:

1. Reference the following JavaScript files in your web project:

<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="letterEffect.js"></script>

2. Call the function on the target text container to produce default animations on the characters.

$(".demo").letterEffect();

3. Customize the text animation using the following options.

$(".demo").letterEffect({

  // CSS property you want to apply
  "effectParam": "color",

  // Propety values
  "effectValues": ["red", "green", "blue", "yellow"],

  // Enable ambient animation
  "ambientAnimation": true,

  // Percentage of affacted characters
  "ambientstrength": .2,

  // Animation speed in seconds
  "time": .5,

  // Amout in seconds to randomly vary animation time
  "drift": .25,

  // CSS3 transition
  "ambientEase": "ease-in-out",

  // Enable hover effect
  "hoverAnimation": true,

  // Transition delay in seconds
  "hoverTime": .3,

  // CSS3 transition
  "hoverEase": "ease-in-out",

  // Groups by every letter
  "splitChar": '',

});

Change log:

• Ability to group characters

---

This awesome jQuery plugin is developed by CIGIHub. For more Advanced Usages, please check the demo page or visit the official website.