Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to jQuery Animated Typing Effect using Typed.js Plugin

by
Category:jquery
jquery html
How to jQuery Animated Typing Effect using Typed.js Plugin

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. jQuery has its share of animation plugins and 'Typed.js' is one among them. The text will be typed literally character by character thus giving you the impression it is being typed on a terminal. You may also like How to Make Animated Skill Bar Using jQuery, HTML And CSS and How to Animated progress bar using jquery, html and css.

HTML and jQuery Code

<!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>

0 Comments


Html code work in comment box


Related Post