Scroll To Top

Simple Text Animation Using CSS, HTML & jQuery

Posted in Code, Tech6 months ago • Written by Murtaxa53 Comments

In this tutorial, I am going to make Simple Text Animation Using CSS, HTML & jQuery. This animation is really simple to make but gives a beautiful effect. And the best part is that it can be adjusted in a way that is best for your project.

Code available here:

Step 1) CSS Code (Style):

<style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: rgb(17, 104,105);
    }
    .text-animation{
      list-style: none;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    .text-animation li{
      display: inline-block;
      margin-right: 5px;
      font-family: sans-serif;
      font-weight: 300;
      font-size: 5em;
      color: #70e1e2;
      opacity: 1;
      transition: all 2s ease;
    }
    .text-animation li:last-child{
      margin-right: 0;
    }
    .text-animation.hidden{
      opacity: 0;
    }

    .text-animation.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px);}
    .text-animation.hidden li:nth-child(2) { transform: translateX(20px) translateY(100px);}
    .text-animation.hidden li:nth-child(3) { transform: translateX(-150px) translateY(-80px);}
    .text-animation.hidden li:nth-child(4) { transform: translateX(10px) translateY(-200px);}
    .text-animation.hidden li:nth-child(5) { transform: translateX(-300px) translateY(200px);}
    .text-animation.hidden li:nth-child(6) { transform: translateX(20px) translateY(-20px);}
    .text-animation.hidden li:nth-child(7) { transform: translateX(30px) translateY(200px);}
    .text-animation.hidden li:nth-child(8) { transform: translateX(-200px) translateY(-200px);}
    .text-animation.hidden li:nth-child(9) { transform: translateX(20px) translateY(100px);}
    .text-animation.hidden li:nth-child(10) { transform: translateX(-150px) translateY(-80px);}
    .text-animation.hidden li:nth-child(11) { transform: translateX(10px) translateY(-200px);}
    .text-animation.hidden li:nth-child(12) { transform: translateX(-300px) translateY(200px);}
  </style>

 


Step 2) HTML Code:

<ul class="text-animation hidden"> 
  <li>A</li> 
  <li>G</li> 
  <li>H</li> 
  <li>A</li> 
  <li></li> 
  <li>M</li> 
  <li>U</li> 
  <li>R</li> 
  <li>T</li> 
  <li>A</li> 
  <li>Z</li> 
  <li>A</li> 
</ul>

 

 

 

The video is available here:


Remember to subscribe and give me thumbs up if you like my videos.

See you next time

TAGS: , , , , ,

53 Comments so far. Feel free to join this conversation.

  1. bdsm lovers March 6, 2017 at 10:15 am - Reply

    Y6tygR Very good blog article.Really thank you! Much obliged.

  2. sprinter mieten March 6, 2017 at 7:33 pm - Reply

    Thanks a lot for the blog post.Much thanks again. Much obliged.

  3. Larisa March 6, 2017 at 8:26 pm - Reply

    Very good blog.Thanks Again. Cool.

  4. tsx share price March 6, 2017 at 9:17 pm - Reply

    I am so grateful for your post. Want more.

  5. double hung low e replacement windows March 6, 2017 at 11:02 pm - Reply

    Thank you for every other great post. Where else may anyone get that type of information in such a perfect method of writing? I ave a presentation next week, and I am at the look for such information.

  6. www.shop-and-smile.com March 7, 2017 at 12:03 am - Reply

    Im obliged for the article post.Really looking forward to read more. Great.

  7. santa monica california classifieds March 7, 2017 at 2:07 am - Reply

    Way cool! Some very valid points! I appreciate you penning this post plus the rest of the site is also really good.

  8. Saugerties musician March 7, 2017 at 4:16 am - Reply

    writing like yours these days. I truly appreciate individuals like you! Take care!! Feel free to visit my blog post aarp life insurance

  9. best stocks tsx March 7, 2017 at 5:21 am - Reply

    Really informative post.Much thanks again.

  10. gmail sign up March 7, 2017 at 7:32 am - Reply

    Really enjoyed this blog post. Fantastic.

  11. Arabic calligraphy learning March 7, 2017 at 7:39 am - Reply

    I cannot thank you enough for the blog post.Really thank you! Really Cool.

  12. eye care exeter March 7, 2017 at 8:53 am - Reply

    Fantastic blog post.Really looking forward to read more. Will read on…

  13. Vedic Astrology Reading March 7, 2017 at 11:56 am - Reply

    Its like you read my mind! You seem to know so much about this, like you wrote

  14. Looking around I like to surf in various places on the internet, regularly I will go to Digg and follow thru

  15. pet dog food March 7, 2017 at 3:18 pm - Reply

    You completed various nice points there. I did a search on the topic and found mainly people will go along with with your blog.

  16. performance based seo March 7, 2017 at 5:31 pm - Reply

    Looking around While I was surfing yesterday I saw a great post concerning

  17. beard oil March 7, 2017 at 9:55 pm - Reply

    Thanks for all your efforts that you have put in this. very interesting information.

  18. best cccam server March 8, 2017 at 1:22 am - Reply

    that could be the finish of this article. Right here you

  19. Meal box children March 8, 2017 at 2:31 am - Reply

    Looking forward to reading more. Great article post.Really thank you! Will read on

  20. Latest Android News March 8, 2017 at 8:35 am - Reply

    Thanks for the post.Really thank you! Cool.

  21. Letting Agents in Oldbury March 8, 2017 at 8:40 am - Reply

    Purple your blog publish and liked it. Have you ever imagined about visitor submitting on other connected blogs related to your blog?

  22. steel tubes chennai tamilnadu india March 8, 2017 at 9:42 am - Reply

    Fantastic blog article.Much thanks again. Really Cool.

  23. vancouver seo company March 8, 2017 at 11:02 am - Reply

    I want to to thank you for this excellent read!! I certainly enjoyed every bit of it. I have got you book-marked to check out new stuff you post

  24. vancouver wa seo March 8, 2017 at 1:20 pm - Reply

    This web site certainly has all of the information and facts I wanted about this subject and didn at know who to ask.

  25. ar condicionado sp March 8, 2017 at 2:29 pm - Reply

    Way cool! Some extremely valid points! I appreciate you penning this post plus the rest of the site is also very good.

  26. Wow, great blog article.Much thanks again. Cool.

  27. auto insurance quotes oregon March 8, 2017 at 4:48 pm - Reply

    sex sex sex. This website above is about sex. We do not approve of websites about sex, porn and man made diseases

  28. eagle wood March 8, 2017 at 5:55 pm - Reply

    Links I am continually browsing online for posts that can help me. Thank you!

  29. EZ Battery Reconditioning Review March 8, 2017 at 7:05 pm - Reply

    Quite instructive blog site. Will browse on

  30. hibiscusteasite.com March 12, 2017 at 11:08 pm - Reply

    This web site definitely has all the information I wanted concerning this subject and didn at know who to ask.

  31. hotel deals March 13, 2017 at 12:18 am - Reply

    Thanks-a-mundo for the article.Really looking forward to read more. Awesome.

  32. Luxury Yacht Charter March 13, 2017 at 2:39 am - Reply

    Really appreciate you sharing this blog article.Much thanks again. Will read on

  33. twitter promotion March 13, 2017 at 7:45 am - Reply

    Appreciate you sharing, great article post.Really looking forward to read more. Much obliged.

  34. sverige March 13, 2017 at 8:57 am - Reply

    Muchos Gracias for your blog post.Really looking forward to read more. Really Cool.

  35. Romero zombies March 13, 2017 at 10:09 am - Reply

    Appreciate you sharing, great blog article. Want more.

  36. global trade March 13, 2017 at 1:39 pm - Reply

    Thanks for sharing, this is a fantastic blog post.Much thanks again. Really Cool.

  37. aliexpress dropshipping March 13, 2017 at 2:53 pm - Reply

    Perfectly pent articles, Really enjoyed studying.

  38. Brisbane Real Estate March 13, 2017 at 4:05 pm - Reply

    Roman Polanski How to make my second blog my default one on Tumblr?

  39. where to find weed March 14, 2017 at 3:11 pm - Reply

    Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is wonderful, as well as the content!

  40. Jasa Like Facebook March 14, 2017 at 9:16 pm - Reply

    That is a great tip especially to those new to the blogosphere. Brief but very precise information Many thanks for sharing this one. A must read article!

  41. schilder vlissingen March 14, 2017 at 10:29 pm - Reply

    Some really choice blog posts on this site, saved to favorites.

  42. Blutzuckerteststreifen schnappchen March 14, 2017 at 11:41 pm - Reply

    I truly appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thanks again

  43. Trump�s Immigration Ban March 15, 2017 at 9:35 am - Reply

    Thanks for the article post.Much thanks again. Really Cool.

  44. vinhomeshcm March 15, 2017 at 10:59 am - Reply

    Yeah bookmaking this wasn at a bad decision outstanding post!.

  45. Marrakech palmeraie camel riding March 15, 2017 at 3:06 pm - Reply

    Just what I was searching for, thank you for putting up.

  46. Travel March 15, 2017 at 3:16 pm - Reply

    I am so grateful for your blog post.Thanks Again.

  47. Exchange Bitcoin to western union March 15, 2017 at 4:22 pm - Reply

    Im obliged for the article.Really looking forward to read more. Cool.

  48. Michelle March 16, 2017 at 9:51 am - Reply

    I?d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment!

  49. γιατρας επιπλα March 16, 2017 at 12:22 pm - Reply

    It as not that I want to duplicate your web site, but I really like the design. Could you tell me which style are you using? Or was it custom made?

  50. GET OUT Movie March 16, 2017 at 2:52 pm - Reply

    We stumbled over here from a different web address and thought I might as well check things out. I like what I see so now i am following you. Look forward to going over your web page again.

  51. earning with products March 16, 2017 at 4:08 pm - Reply

    I value the article post.Thanks Again. Want more.

Leave A Response