DEV Community

Mr.Shah
Mr.Shah

Posted on

Terminal Animation for your website using Typed.js

Web Development

Many times when we come through some interesting thing such as animations or Transitions we are eager to know how to implement it in real practice.

I came to know many developers are using Terminal Animations for their website why should I help Beginner Web Developers to implement it for their website.

Besides, you can also add other stuffs in animations like:

  • startDelay: 0 - [startDelay time before typing starts in milliseconds]
  • shuffle: false - [shuffle the strings]
  • loopCount: Infinity - [Amount of loops]
    For more you can checkout this GitHub Repo:

    GitHub logo mattboldt / typed.js

    A JavaScript Typing Animation Library

    Code Climate GitHub release npm GitHub license

    Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.


    Installation

    CDN

    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
    Enter fullscreen mode Exit fullscreen mode

    For use directly in the browser via <script> tag:

      <!-- Element to contain animated typing -->
      <span id="element"></span>
    
      <!-- Load library from the CDN -->
      <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
    
      <!-- Setup and start animation! -->
      <script>
        var typed = new Typed('#element', {
          strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
          typeSpeed: 50,
        });
      </script>
    </body>
    Enter fullscreen mode Exit fullscreen mode

    As an ESModule

    For use with…


    Hope you guys have gained some Knowledge ✌️

Top comments (4)

Collapse
 
adhirajbhatia profile image
AdhirajBhatia

Nice Post !

Collapse
 
shahstavan profile image
Mr.Shah

Thanks Biro✌️
If you want to learn Django you can even check out my website 🤘

Collapse
 
sagarladla profile image
Sagar Ladla

Ahaa!

Collapse
 
shahstavan profile image
Mr.Shah

😎🤘