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 a cool typing effect. The animated effect is like the fast command line typing that you may use for displaying news items or customer reviews, announcements, 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.

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:

        <p id="coolType-demo" style="display: none">

            Text provided here will appear with cool typing in the browser!

        </p>

Initiate the plug-in:

            $(function () {

                var text = $('#coolType-demo').text();

                $('body').coolType(text);

            });

Use the options provided by the demo to customize the typing effect. See the demos below of using it to 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:

See online demo and code

See the complete code in the 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

The jQuery code:

<script type="text/javascript">

  $(function () {

var msg = 'Text provided here will appear with cool typing in the browser!';

var options = {

    typeSpeed: 100,

    inline: false,

    cursorChar: '&#9608;',

    cursorBlinkSpeed: 400,

    delayBeforeType: 500,

    delayAfterType: 1000

 

};

$('body').coolType(msg, options);

            });

</script>

To learn more about the available options, go to the plug-in page.