Create Animated Typing Effect in HTML elements by jQuery coolType

The jQuery coolType plug-in

The coolType plug-in adds character by character of a given string in HTML elements with cool typing effect. The animated effect is like the fast command line typing that you may use for displaying news items or customer reviews, announcement etc. that a visitor’s eye can catch easily.

The development version of the JS file of the plug-in is 4K. See the next section for setting up this plug-in with many options.

Demo1 Demo2
Developer’s page Download plug-in

Setting up cool typing plug-in?

If you are already using the jQuery library, include the jquery.coolType.js file after that:

 <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script type=”text/javascript” src=”js/coolType/jquery.coolType.js”></script>

Using the markup

The markup may be a simple paragraph or div etc. text element where you will provide the text to display with typing effect. It should have a unique ID that is referred in jQuery code for initiating the plug-in:

 

Initiate the plug-in:

 

Use the options provided by the demo to customize the typing effect. See the demos below of using it ot read more by visiting the developer’s page.

A demo of animated cool typing effect

For the example, the dummy text is given in a div element. No options are used for this demo, so typing effect occurs with default options. Have a look:

jQuery cool typing

See online demo and code

See the complete code in demo.

A demo of with slow speed and cursorBlinkSpeed options

You may set the speed of typing effect as well as cursor blink speed by using the options in jQuery code. In the following demo, the following options are used:

  • typeSpeed: 100,
  • inline: false,
  • cursorBlinkSpeed: 400
  • delayAfterType: 1000
  • delayBeforeType: 500

See the output and code by visiting the demo page:

See online demo and code

The jQuery code:

 

For learning more about the available options, go to the plug-in page.