Animated Typing with TypeIt.js Jquery Plugin

TypeIt is the most versatile JavaScript typewriter effect utility on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain HTML.

For more advanced typing effects, instance methods are available that can be chained to control your typing down to a single character, enabling you to type an dynamic narrative, with complete reign over speed changes, line breaks, deletions, and pausing.

Here is the CDN link to the JQuery Plugin :
https://cdn.jsdelivr.net/npm/typeit/dist/typeit.min.js

Source Code :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeit/6.5.1/typeit.min.js"></script>
<style>
  body{
    font-size: 2em;
  }
</style>
<h1 style="text-align:center;">Animated Typing with TypeIt.js</h1>

<p id="example1"></p>

<script type="text/javascript">


  new TypeIt("#example1", {
      strings: "This is a simple string.",
      speed: 50,
      waitUntilVisible: true
    }).go();
</script>



<p id="example2"></p>

<script type="text/javascript">
  new TypeIt("#example2", {
      strings: ['This is a simple string','But here is a better one.'],
      speed: 50,
      waitUntilVisible: true
    }).go();

</script>

 

 

 



Recommended For You

About the Author: Admin