Add typing animations to your website with TypeIt

TypeIt creates the illusion that text is typing itself out on your webpage. I used this jQuery plugin in my consulting website and I’ll likely use it again in the future. Here is a tutorial on how use TypeIt.

It is easy to implement TypeIt. All you need to do is reference jQuery and the TypeIt Javascript file in your HTML file like so:

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 

<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>

Once your webpage has those references all you need to do is assign the typeIt function to one of the elements on your page with the following code:

<p id="element">
Type this text!
</p>

<script>
$('#element').typeIt({
 // options
});
</script>

See this code live here: https://jsfiddle.net/xxek9k3p/

The code above demonstrates the most basic TypeIt animation possible. There are a number of ways you can customize TypeIt. Checkout the following documentation to change the speed of the animation, delete text, and more:  TypeIt Docs.

Leave a Reply

Your email address will not be published. Required fields are marked *