Simple Animated Text Using HTML/jQuery

Submitted by razormist on Monday, August 14, 2017 - 19:13.
In this tutorial we will create a Simple Animated Text Using jQuery. The jQuery is a fast, reliable kind of cross-platform javascript library. It is designed to simplify the traditional way of coding in javascript. So let's now do the coding. Creating the Mark Up To display the animated text will need to create the mark up language, to do that open any kind of text editor(notepad++, etc). Then copy/paste the provided code below and name it 'index.html'
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3.         <head>
  4.                 <meta charset = "utf-8" name = "viewport" content = "width=device-width, initial-scale=1" />
  5.                 <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  6.                 <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  7.         </head>
  9.         <nav class = "navbar navbar-default">
  10.                 <div class = "container-fluid">
  11.                         <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
  12.                 </div>
  13.         </nav>
  14.        
  15.         <div class = "col-md-3"></div>
  16.         <div class = "col-md-6 well">
  17.                 <h3 class = "text-primary">HTML - Simple Animated Text</h3>
  18.                 <hr style = "border-top:1px dotted #000;"/>
  19.                 <button class = "btn btn-primary animate">Assemble</button>
  20.                 <button class = "btn btn-danger rum">Disassemble</button>
  21.                 <br /><br /><br /><br /><br /><br />
  22.                 <center>
  23.                         <ul class = "text-animation text-primary">
  24.                                 <li>S</li>
  25.                                 <li>O</li>
  26.                                 <li>U</li>
  27.                                 <li>R</li>
  28.                                 <li>C</li>
  29.                                 <li>E</li>
  30.                                 <li>C</li>
  31.                                 <li>O</li>
  32.                                 <li>D</li>
  33.                                 <li>E</li>
  34.                                 <li>S</li>
  35.                                 <li>T</li>
  36.                                 <li>E</li>
  37.                                 <li>R</li>
  38.                         </ul>
  39.                 </center>
  40.                 <br /><br /><br /><br /><br /><br />
  41.         </div>
  42.        
  43.        
  44.        
  45. </body>
  46. <script src = "js/jquery-3.2.1.js"></script>
  47. <script type = "text/javascript">
  48.         $(document).ready(function(){
  49.                 $('.animate').on('click', function(){
  50.                         setTimeout(function(){
  51.                                 $('.text-animation').removeClass('rumble');
  52.                         }, 500);
  53.                 });
  54.                 $('.rum').on('click', function(){
  55.                         setTimeout(function(){
  56.                                 $('.text-animation').addClass('rumble');
  57.                         }, 500);
  58.                 });
  59.         });
  61. </html>
The script below trigger the text to animated when either of the two button is clicked. Adding CSS To add a style to our animated text, just simply copy/paste the code below. Then save it as 'style.css', and put it into the css folder.
  1. .text-animation{
  2.         list-style:none;
  3. }
  4.  
  5. .text-animation li{
  6.         display:inline-block;
  7.         opacity:1;
  8.         font-size:30px;
  9.         transition:all 3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  10. }
  11.  
  12. .text-animation li:last-child{
  13.         margin-right:0;
  14. }
  15.  
  16. .text-animation.rumble{
  17.         opacity:1;
  18. }
  19.  
  20. .text-animation.rumble li:nth-child(1){transform: translateX(-200px) translateY(-200px);}
  21. .text-animation.rumble li:nth-child(2){transform: translateX(20px) translateY(100px);}
  22. .text-animation.rumble li:nth-child(3){transform: translateX(-150px) translateY(-80px);}
  23. .text-animation.rumble li:nth-child(4){transform: translateX(10px) translateY(-120px);}
  24. .text-animation.rumble li:nth-child(5){transform: translateX(-200px) translateY(15px);}
  25. .text-animation.rumble li:nth-child(6){transform: translateX(-300px) translateY(-20px);}
  26. .text-animation.rumble li:nth-child(7){transform: translateX(20px) translateY(40px);}
  27. .text-animation.rumble li:nth-child(8){transform: translateX(30px) translateY(-200px);}
  28. .text-animation.rumble li:nth-child(9){transform: translateX(20px) translateY(100px);}
  29. .text-animation.rumble li:nth-child(10){transform: translateX(-150px) translateY(-80px);}
  30. .text-animation.rumble li:nth-child(11){transform: translateX(10px) translateY(-140px);}
  31. .text-animation.rumble li:nth-child(12){transform: translateX(230px) translateY(90px);}
  32. .text-animation.rumble li:nth-child(13){transform: translateX(10px) translateY(-150px);}
  33. .text-animation.rumble li:nth-child(14){transform: translateX(210px) translateY(110px);}
There you have it we created a Simple Animated Text Using jQuery. I hope that this tutorial help you for what you are looking for. For more updates and tutorial just kindly visit this site. Enjoy Coding!!
Tags
jQuery
HTML

Add new comment

About text formats
  • 140 views