Creating Simple Text Animations with jQuery FunnyText Plugin

funnyText is a lightweight (~3kb minified) jQuery plugin that makes use of javascript and CSS3 transitions to create random text animations like moving, flipping, etc.

See also:

• jQuery Plugin For Split Flap Text Animation - Flapper
• jQuery Text Animation Plugin with CSS3 - textillate
• Text Animation Effect with jQuery - animateText.js

Basic Usage:

1. Load the required jQuery funnyText CSS file in the head section of your document.

<link rel="stylesheet" type="text/css" href="./jquery.funnyText.css" />

2. Create some text on your page.

<div class="demo"> jQueryScript.Net </div>

3. Load the jQuery library and jQuery funnyText plugin at the bottom of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.funnyText.js"></script>

4. Call the plugin with animation options.

<script type="text/javascript">
$(document).ready(function() {
$('.demo').funnyText({
speed: 700, // the speed of your text animation.
borderColor: 'black', // the border color of your characters.
activeColor: '#fff', // the text color when the animation is active.
color: 'black', // the default color of your text.
fontSize: '8em' //  the font size of your text.
});
});
</script>

---

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