This time I will share jQuery Plugin and tutorial about Random Smooth Text Ambient Animations With jQuery – Letter Effects, hope it will help you in programming stack.
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:
1 |
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script> |
2 |
<script src="letterEffect.js"></script> |
2. Call the function on the target text container to produce default animations on the characters.
1 |
$(".demo").letterEffect(); |
3. Customize the text animation using the following options.
01 |
$(".demo").letterEffect({ |
04 |
"effectParam": "color", |
07 |
"effectValues": ["red", "green", "blue", "yellow"], |
10 |
"ambient<a href="https: |
13 |
"ambientstrength": .2, |
22 |
"ambientEase": "ease-in-out", |
25 |
"hoverAnimation": true, |
31 |
"hoverEase": "ease-in-out", |
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.
