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

2 Comments

  1. Larry Roberts

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

    Reply
    • Marko Novakovic

      Good catch! We fixed it!

      Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.