It can be used to stylize titles, menu buttons, or any other text.
Demo To use textition.js you need jQuery library version 1.6 or later.
The initialization code can be inserted into head or body tag.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/textition.js"></script>Add method textition() to the object that contains text for transition.
$(document).ready(function() { $('#example').textition(); });The text should be in block element. The number of text blocks is not limited.
<div id="example"> <span>First text</span> <span>Second text</span> <span>Third text</span> </div>
Because example has three div, text will be appearing in three variants, replace each other step by step.
Textition.js has some options. You can get acquainted with them in documentation.Example of the parameters usage:
$(document).ready(function() { $('#example').textition({ handler: 'mouseenter', animation: 'ease-in-out', speed: 1 }); });Chrome 4.0, Safari 3.1, Firefox 4, Opera 10.5, Internet Explorer 10