⌨️ A tiny library for creating a typing effect on specified text element.
JavaScript HTML CSS
Latest commit b13228a Nov 28, 2016 @lourenc committed on GitHub Update README.md

README.md

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element.

npm version JavaScript Style Guide Build Status Dependency Status

Demo

Size (It's really tiny)

  • Minimized: 2.9KB
  • Gziped: 1.1KB

Installation

Library can be easily installed via either NPM or Bower:

npm i tinytyper --save

OR

bower i tinytyper --save

Usage

Basic setup looks like this:

import TinyTyper from 'tinytyper';

const el       = document.querySelector('.text-el')
const options  = { /* . . . */ }
const instance = new TinyTyper(el, options)

In case you need to run animation again:

instance.animate()

Available options:

Option Default Description
text innerText of specifed element Sets a text to be displayed
textSpeed 95 Defines of text speed animation
cursor ▌ Defines current cursor symbol
blinkSpeed 0.05 Defines blink speed of a cursor
cursorClass tiny-typer-cursor A CSS class for cursor element
textClass tiny-typer-text A CSS class for text element
staticCursor false Makes cursor static (disables blinking)
staticText false Makes text static (disables animation)

Contributions

Contributions are welcome. Feel free to create issues and PRs

License

MIT