CSS3 Text Animation using jQuery Textillate Plugin
Texttillate.js contains some libraries to give the users, an easy-to-use plugin for applying CSS3 animations to any text.
- Download all the dependencies in a folder. Please take care of the file paths in the correct order while implementing the codes given below.
- Include all the relevant CSS files in the head section of the HTML file.
- Give a class name to the text you want to apply animation.
- For the above step, use the document.ready() event.
<link href=”assets/animate.css” rel=”stylesheet”>
<link href=”assets/style.css” rel=”stylesheet”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”> </script>
Example 1: The following code demonstrates the basic initialization of textillate() method of the plugin on the “h2” text.
Example 2: In the following example, we have taken an unordered list <ul> with list items <li>. The animation effects are given as “fadeOut” and “fadeIn” as shown below in the code. Refer to the output for better understanding.
Example 3: The following code demonstrates the different options applied to attributes in the script part of the code. The developer can try out various options as per the application’s need. Few are shown below.