CSS3 Text Animation using jQuery Textillate Plugin
In this article, we will learn some basic CSS3 text animations using the jQuery Textillate plugin.
Texttillate.js contains some libraries to give the users, an easy-to-use plugin for applying CSS3 animations to any text.
Approach:
- 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.
- Include all the JavaScript files in the script part of the code.
- Give a class name to the text you want to apply animation.
- In the JavaScript part of the code, instantiate the textillate() method using the class name for the text as shown in the codes below.
- For the above step, use the document.ready() event.
Libraries used:
<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>
<script src=”assets/jquery.fittext.js”></script>
<script src=”assets/jquery.lettering.js”></script>
<script src=”jquery.textillate.js”></script>
Example 1: The following code demonstrates the basic initialization of textillate() method of the plugin on the “h2” text.
HTML
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href="assets/animate.css" rel="stylesheet"> <link href="assets/style.css" rel="stylesheet"></head> <body> <center> <h2 class="myClass"> GeeksforGeeks </h2> <script src= </script> <script src="assets/jquery.fittext.js"></script> <script src="assets/jquery.lettering.js"></script> <script src="jquery.textillate.js"></script> <script> $(document).ready(function () { $('.myClass').textillate(); }); </script> </center></body> </html> |
Output:
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.
HTML
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href="assets/animate.css" rel="stylesheet"> <link href="assets/style.css" rel="stylesheet"> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <p><b>Animate a list</b> <p> <h3 class="myClass"> <ul class="texts"> <li data-out-effect="fadeOut" data-out-shuffle="true"> Learn PHP </li> <li data-in-effect="fadeIn"> Learn CSS </li> </ul> </h3> <script src= </script> <script src="assets/jquery.fittext.js"></script> <script src="assets/jquery.lettering.js"></script> <script src="jquery.textillate.js"></script> <script> $(document).ready(function () { $('.myClass').textillate(); }); </script> </center></body> </html> |
Output:
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.
HTML
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href="assets/animate.css" rel="stylesheet"> <link href="assets/style.css" rel="stylesheet"></head> <body> <center> <h2 style="color:green"> GeeksforGeeks </h2> <p><b>Animate a list</b><p> <h3 class="myClass"> <ul class="myTexts"> <li data-out-effect="fadeOut" data-out-shuffle="true"> Learn PHP </li> <li data-in-effect="rollIn"> Learn CSS </li> </ul> </h3> <script src= </script> <script src="assets/jquery.fittext.js"></script> <script src="assets/jquery.lettering.js"></script> <script src="jquery.textillate.js"></script> <script> $(document).ready(function () { $('.myClass').textillate({ // Selector of multiple texts to animate selector: '.myTexts', // Enable looping loop: false, // Sets the minimum display time for // each text before it is replaced minDisplayTime: 3000, // Sets the initial delay before // starting the animation initialDelay: 50, // Automatically start animating autoStart: true, // Character is shown/hidden // before or after animation inEffects: [], // Set 'out' effects outEffects: ['hinge'], // In animation settings in: { // Set the effect name effect: 'fadeInLeftBig', // Set the delay applied to // each character delayScale: 1.5, // Set the delay between // each character delay: 100, // Set to true to animate all the // characters at the same time sync: false, // Randomize the character sequence shuffle: true, // Reverse the character sequence reverse: true, // Callback once the animation // has finished callback: function () { } }, // Out animation settings. out: { effect: 'hinge', delayScale: 1.5, delay: 100, sync: false, shuffle: true, reverse: true, callback: function () { } }, // Callback once textillate // has finished callback: function () { }, // Set type as 'char' or // 'word'to animate type: 'word' }); }); </script> </center></body> </html> |
Output:
Example 4: The following code demonstrates the event handling triggered by the textillate plugin. An example is shown for the “In animation end” and “Out animation begin” events. JavaScript alert messages are thrown at various events.
HTML
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href="assets/animate.css" rel="stylesheet"> <link href="assets/style.css" rel="stylesheet"></head> <body> <center> <h2 class="tlt">GeeksforGeeks</h2> <h3 class="tlt"> <ul class="texts"> <li data-out-effect="fadeOut" data-out-shuffle="true"> Learn PHP </li> <li data-in-effect="fadeIn"> Learn CSS </li> </ul> </h3> <script src= </script> <script src="assets/jquery.fittext.js"></script> <script src="assets/jquery.lettering.js"></script> <script src="jquery.textillate.js"></script> <script> $(document).ready(function () { $('.tlt').textillate(); $('.tlt').on('inAnimationEnd.tlt', function () { alert("In animation came to an end"); }); $('.tlt').on('outAnimationBegin.tlt', function () { alert("Out animation Began"); }); }); </script> </center></body> </html> |
Output:
Please Login to comment...