jQuery TextFX

jQuery TextFX is your all in one plug-in for making your text feel good, look good, and animate good.

Getting started is easy, all you need to do is download the plugin then include it in your project!

Please install jquery.transit.js as well as TextFX uses CSS Transforms instead of jquery.animate() transitions.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.transit.js"></script>
<script type="text/javascript" src="jquery.textFx.js"></script>

The API is so simple, that it is binded all to one function. $.textFx();

The arguments are super simple too:

/*
The API and textFX object reference:

type: this is the type of animation
	Types of animations:
	fadeIn - fades in each characters,
	slideIn - slidesIn each character from a direction,
	rotate - rotates each character in,
	scale - zooms in the text


iChar: this is the delay between each characters 
animation in ms

iAnim: this is the time of the animation for 
each character in ms

direction: only applicable to slide, is the direction 
(top, left, down, right) the character slides from

*/

//Here are examples of how to write a textFx!
$('.element1').textFx({
	type: 'fadeIn',
	iChar: 500,
	iAnim: '250'
	//Fades in
});
$('.element2').textFx({
	type: 'slideIn',
	iChar: 750,
	iAnim: 500,
	direction: 'top'
	//Slides in from the top.
});
$('.element3').textFx({
	type: 'rotate',
	iChar: 750,
	iAnim: 500,
	rotate: '180-0' 
	//Rotates from 180 degrees to 0.
});

Below are demonstrations and code samples of all of textFxs features:

$('.test').textFx({
	type: 'fadeIn',
	iChar: 100,
	iAnim: 1000
});

$('.test').textFx({
	type: 'rotate'
});

$('.test').textFx({
	type: 'scale'
});

$('.test').textFx({
	type: 'slideIn',
	direction: 'bottom',
	iChar: 250,
	iAnim: 1000
});

Got a question or problem? E-mail: codeviolet@chriscates.ca