Home Carbon Ads Typing Effect using JavaScript

Typing Effect using JavaScript

typing-effect

In this tutorial we will see how to create a typing effect using JavaScript and CSS3. A typing effect is eye catching therefore visitors will surely read whats being typed. This can be used for to convey important messages. Even speech to text web apps use this effect.

Using TheaterJS

We will use TheaterJS library to create such kind of effect.

Here is sample code on how to load this library and initialise it.

        <script src="https://cdn.rawgit.com/Zhouzi/TheaterJS/gh-pages/build/theater.min.js"></script>
        <script type="text/javascript">
                        //create an theater object
            var theater = new TheaterJS();
                        //provide an slug/id for a pice for text in first parameter and an id of an HTML element inside which you want typing effect.
            theater.describe("text", {speed: .7, accuracy: .9}, "#text");
                        //now call write function with the slug and text to write separated with an colon.
            theater.write("text:QNimate, Narayan's Blog", 600);
        </script>

Complete Example

Here is an complete example of an typing effect with an blinking character. We made the blinking character using CSS3 keyframe animations and psuedo-element.

View Demo

<!doctype html>
<html>
    <head>
        <title>Theater JS Demo</title>

        <style type="text/css">
            #text:after
            {
                content: "";
                display: inline-block;
                height: 1em;
                width: 3px;
                background-color: #333333;
                margin-left: 2px;
                font-weight: normal;
                position: relative;
                top: 4px;
                -webkit-animation: blinker steps(1) 1s infinite;
                -o-animation: blinker steps(1) 1s infinite;
                -moz-animation: blinker steps(1) 1s infinite;
                animation: blinker steps(1) 1s infinite;
            }

            @-webkit-keyframes blinker {  
                0% { visibility: visible; }
                50% { visibility: hidden; }
                100% { visibility: visible; }
            }

            @-moz-keyframes blinker {  
                0% { visibility: visible; }
                50% { visibility: hidden; }
                100% { visibility: visible; }
            }

            @-o-keyframes blinker {  
                0% { visibility: visible; }
                50% { visibility: hidden; }
                100% { visibility: visible; }
            }

            @keyframes blinker {  
                0% { visibility: visible; }
                50% { visibility: hidden; }
                100% { visibility: visible; }
            }
        </style>
    </head>
    <body>
        <h1 id="text"><noscript>QNimate, Narayan's Blog</noscript></h1>

        <script src="https://cdn.rawgit.com/Zhouzi/TheaterJS/gh-pages/build/theater.min.js"></script>
        <script type="text/javascript">
            var theater = new TheaterJS();
            theater.describe("text", {speed: .7, accuracy: .9}, "#text");
            theater.write("text:QNimate, Narayan's Blog", 600);
        </script>
    </body>
</html>
Narayan Prusty
JavaScript Limit Function Call RateUnderscores.me Tutorial
Comments: 2
  1. Jackie
    3 years ago

    Hi I was wondering how you add text to write it out(typewriter affect)This is teh only place were i could even find a code for a blinking cursor gah i could use the help please?

    ReplyCancel
    • Kapil
      3 years ago

      Here-https://codepen.io/stathisg/pen/Bkvhg

      ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image5 years ago 2 Comments Web Development
Share this
Related Articles