jQuery Animated Typing Effect using Typed.js Plugin

Posted by On 2/01/2018

Hi! Today, we are going to see an interesting tutorial, which is to animate typing effect using jquery typed.js plugin. Not all animations require the skill of a graphics artist. You can pull in some really cool animations just with jquery plugins. jQuery has its share of animation plugins and 'Typed.js' is one among them. It is simple, lightweight and let you add typing effect to web pages. The text will be typed literally character by character thus giving you the impression it is being typed on a terminal.

Come, let's see how to implement this typing effect on websites.

jquery animated typing effect typed.js example

Adding Animated Typing Effect in jQuery:

Typed.js is a jquery library to simulate the terminal typing effect that allows you to print plain text or html as if you were typing on the screen.

How to Use it:

First create a container to print the string.

<div id="container"></div>

Then call the function typed() on the container element that we have created and provide the string(s) to be printed.

$("#container").typed({
    strings: ["String1", "String2", "..."]
});

You can add more than one string separated by commas. And can even style the screen cursor with css like this,

.typed-cursor {
    // add styles here
}

Below is the complete demo to animate dynamic typing.

<!DOCTYPE html>
<html>
<head>
    <title>Animated Typing Effect in jQuery</title>
    <style type="text/css">
    div {
        margin: 0 auto;
        width: 60%;
        min-height: 150px;
        text-align: center;
        background: #222;
    }
    
    #board, .typed-cursor {
        font-size: 40px;
        color: #FFF;
    }
    </style>
</head>
<body>
    <div>
        <span id="board"></span>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/typed.js/1.1.7/typed.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#board").typed({
            strings: ["This is the test.", "Have a Good Day!!!"],
            typeSpeed: 30
        });
    });
    </script>
</body>
</html>

Running this script would produce something like this,

typed js demo

You can pass several options to the method typed() and control the way it behaves. Above we have used only two options,

  1. strings - Defines the array of strings to be typed.
  2. typeSpeed - Defines the writing speed in milliseconds.

Apart from these two options, there are several others which you can refer in the official documentation of the plugin.

Read Also:

That explains about creating animated typing effect with jquery and typed.js. In the demo, I have loaded both 'js' libraries from CDN, but you can download and use them from your own server. I hope you find it useful. Please share the post with your friends if you like it.

No comments:

Post a Comment

Contact Form

Name

Email *

Message *