TypePlay.js

TypePlay is a JavaScript library that help the user create a visual effect - to type text like a real person would.

Install TypePlay

Install using NPM, GIT or just hotlink the script.

From NPM:

npm install typeplay --save

From GIT:

git clone ...
npm update
npm run build

From a Hotlink

<script src="https://path_to_github/dest/iife/TypePlay.min.js"></script>

CSS

The blinking cursor is a "|" character position and animated using css. Depending on your choice of font-family and font-size you might need to modify the left and margin-right properties. Adjust until blinking cursor stops dislocating the characters around it.

@keyframes blink {
    0%   {opacity: 1;}
    49%  {opacity: 1;}
    50%  {opacity: 0;}
    99%  {opacity: 0;}
    100% {opacity: 1;}
}
 
.typePlayBlinker {
    position: relative;
    left: -5px;
    margin-right: -12px;
    animation-name: blink;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}

Initialization

TypePlay comes in CJS and IIFE formats pre-build:

IIFE

If you would like to just add it in your browser and use it straight away use any of the IIFE version:

<script src="https://path_to_github/dest/iife/TypePlay.js"></script>
<script src="https://path_to_github/dest/iife/TypePlay.min.js"></script>

CJS

If you would like to package it together with other scripts in your App using Webpack or any other alternatife use the CJS version:

import {TypeWrapper} from './dest/js/TypeWrap';

import TypePlay from "TypePlay";
 
let element = document.getElementById("scene");
let typer = new TypePlay(element, {typeSpeed: {min: 90, max: 240}});
typer
    .wait(2500)
    .eraseAll()
    .type("PHP develo")
    .eraseAll()
    .wait(600)
    .type("JavaScript Dev")
    .eraseAll()
    .wait(620)
    .type("Software Developer")
    .wait(10000)
    .repeat()
    .play();
 

Digging a little deeper

If you dig a little deeper into the source you will notice that there are 2 classes - TypePlay and TypeWrap. The second is there only to provide the chainability. Building the TypePlay source (the index.js file) will result in building TypeWrap.