Creating Simple Text Animations with jQuery FunnyText Plugin

Creating Simple Text Animations with jQuery FunnyText Plugin
File Size: 158KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.