textTweener

A jQuery Plugin to generate letter based animation tweens between different texts.

With textTweener you can generate a text rotator to your page. The different texts fade nicely into each other by moving the letters to their new position.

Planned features for future releases:

• Multiple instances
• prev & next buttons.

Changelog:

v0.2: Ready for numbers and special characters. No bugs if a character is not supported. Class names are changed.

v0.1: Only works for letters at the moment, no numbers or special characters.

Preview:

Include the js file in the header or the footer of your page:

<script src="jquery-textTweener.min.js"></script>

Add some css to the header of your page:

	<style>
	#texttween {
		position: relative;
		width: 500px;
		height: 400px;
	}
		#texttween .text {
		position: absolute;
		}
	</style>

Then add a div with the containing textelements to the body of your page:

<div id="texttween">
<span class="text">This is a very long sample text with a lot of words to test the function of TextTweener.</span>
<span class="text">The second text will then be created smoothly with the letters from the first text.</span>
<span class="text">And after that there is a third text to watch the transition again.</span>
<span class="text">If you like, you can change the duration of one text by using the option duration.</span>
</div>

Finally, you start the Tweening Function by connecting TextTweener to the parent div:

<script>
$("#texttween").TextTweener({
	duration: "5000"
});
</script>

Duration is optional, standard is 5000ms.

Example: (http://www.realmaker.de/texttweener/jquery-texttweener-example.html)