#FontAnim

This is part of a collection of JQuery plugins that animate text in various ways.

There are 4 different plugins:

• Random letter styles
• Random font families
• Word zoom (TBA)
• Kaleidoscope letters (TBA)

FontAnim randomly displays each letter of the selected element's text using a different font face. It requires an array of font-family names passed to the plugin. The plugin uses Web Font Loader which is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.

See a demo and find out more information about this work-in-progress:

http://eldub10.github.io/fontanim

##Usage

Include jquery.fontanim.js after JQuery. FontAnim also requires webfontloader.js

<script src="jquery.js"></script>
<script src="webfontloader.js"></script>
<script src="jquery.fontanim.js"></script>

Create an HTML element that contains text. A div element works best:

<div class="animation">Animated Fonts</div>

Call fontAnim on the element:

$(function () {
	$(".animation").fontAnim({
		fontlist: ['Roboto','Oswald','Lato','Slabo']
	});
})

##Options

$(".animation").fontAnim({

	// duration the animation will last
	duration: 10000,

	// update interval for each 'frame' of animation
	interval: 300,

	// array of font-family names from Goggle Fonts
	fontlist: [],

	// function that will be called when animation is complete
	complete: function() { }
});