Terminal Style Text Print Animation In JavaScript – tinytyper

Category: Animation , Javascript , Text | March 2, 2020
Author: lourenc
Views Total: 166 views
Official Page: Go to website
Last Update: March 2, 2020
License: MIT

Preview:

Terminal Style Text Print Animation In JavaScript – tinytyper

Description:

tinytyper is a simple, tiny, standalone JavaScript library that animates your text character by character just as someone typing something in a terminal or on a typewriter.

How to use it:

1. Install and import the tinytyper as an ES module.

# NPM
$ npm install tinytyper --save
import TinyTyper from 'tinytyper';

2. Or include the UMD version on the HTML page.

<script src="./lib/tinytyper.js"></script>

3. Initialize the plugin on a placeholder in which you want to print the text. That’s it.

var el= document.querySelector('.container')
var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com'
}
var instance = new tinytyper(el, options)

4. Customize the blinking cursor displayed at the end of the text while typing.

var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com',
    cursorClass: 'tiny-typer-cursor',
    cursor: ' &#9612;'
}

5. Customize the animation speed. Default: 95.

var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com',
    textSpeed: 100
}

6. Override the default wrapper class.

var options  = {
    text: 'CSSScript \n .COM \n CSSScript.com',
    textClass: 'tiny-typer-text'
}

7. Re-animate the text.

instance.animate()

You Might Be Interested In:


Leave a Reply