Realistic Text Typing Effect – realistic-typewriter.js

Category: Animation , Javascript , Recommended , Text | October 8, 2018
Author: fardjad
Views Total: 2,439
Official Page: Go to website
Last Update: October 8, 2018
License: MIT

Preview:

Realistic Text Typing Effect – realistic-typewriter.js

Description:

realistic-typewriter.js is a JavaScript library used to mimic the typewriter text typing/deleting effects just like the terminal. Written in CoffeeScript.

How to use it:

Load the compiled & minified version of the realistic-typewriter.js in your html page.

<script src="typewriter-bundle.min.js"></script>

The HTML structure.

<span id="typewriter" class="typewriter"></span>
<span class="caret">&nbsp;</span>

The basic usage:

var typewriter = require('typewriter');

var twSpan = document.getElementById('typewriter');

var tw = typewriter(twSpan).withAccuracy(95)
                           .withMinimumSpeed(5)
                           .withMaximumSpeed(17)
                           .build();
tw.put('$ ')
  .waitRange(500, 1000)
  .type('ls realistic-typewriter.js')
  .put('<br/>')
  .waitRange(1000, 1500)
  .put('ls: realistic-typewriter.js: No such file or directory<br/>')
  .put('$ ')
  .waitRange(1000, 1500)
  .type('exit')
  .put('<br/>')
  .wait(500)
  .put('logout<br/><br/>')
  .put('[Process completed]<br/>');

Changelog:

v0.2.3 (10/08/2018)

  • Update

You Might Be Interested In:


One thought on “Realistic Text Typing Effect – realistic-typewriter.js

  1. faith

    i here so texts by related fully understanding cant im. better understand to this texts which method needs?

    Reply

Leave a Reply