Typewriter effect

by | Feb 20, 2019 | Web Design, Demo

To be successful is to
Typewriter effect can be achieved in many different ways but here is one example of a typewriter effect using HTML, CSS and JavaScript.

HTML code example

<div class=”console-container”>
To be
<span class=”highlight”> successful</span>
is to
<span id=”text”></span>
<div class=”console-underscore” id=”console”>_</div>

In HTML code static part of the text can be defined. Div with the ID text is used to insert dynamic part of the sentence. That part if the text is inserted using Java Script. In CSS code, text can be customized. Define color, size and position of the text. In JavaScript you can add dynamic part of the sentence that will be inserted into HTML. That text is being parsed and inserted each character at a time. Speed of insertion can also be adjusted inside JavaScript code.

CSS code example

JavaScript code example


  1. Love your code, I hope to try it out soon. However, successful is spelled wrong. It has 2 c’s.

    • Good catch! We fixed it!


Submit a Comment

Your email address will not be published. Required fields are marked *