 ______
/\__  _\                                     __
\/_/\ \/  __  __   _____      __   _ __     /\_\     ____
   \ \ \ /\ \/\ \ /\ '__`\  /'__`\/\`'__\   \/\ \   /',__\
    \ \ \\ \ \_\ \\ \ \L\ \/\  __/\ \ \/ __  \ \ \ /\__, `\
     \ \_\\/`____ \\ \ ,__/\ \____\\ \_\/\_\ _\ \ \\/\____/
      \/_/ `/___/> \\ \ \/  \/____/ \/_/\/_//\ \_\ \\/___/
              /\___/ \ \_\                  \ \____/
              \/__/   \/_/ By: The Qodesmith \/___/

Typer.js ·

Typer.js is an easy to use, choc-full-of-options, robust automated typing library. There are a number of methods with various options for you to impress your friends, have a parade thrown in your name, and officially obtain "that guy" status ("that gal" for the ladies).

Typer.js has no library dependencies so just slap it on your page and go. We still love you, jQuery. And the minified file is only 4k gzipped!

In short... Typer.js can type regular characters, unicode characters, whole words, half words, HTML elements, erase stuff, go fast, go slow, make new lines, fire events, listen to events, run functions, and make julienne fries in minutes.

Installation

Manually

Simply include typer.css in the <head>...

<head>
  ...
  <link rel="stylesheet" href="typer.css" />
  <!-- Via Unpkg CDN -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/typer-js/dist/typer.min.css"> -->
</head>

and include typer.min.js just above your closing </body> tag...

<body>
  ...
  <script src="typer.min.js"></script>
  <!-- Via Unpkg CDN -->
  <!-- <script src="https://unpkg.com/typer-js"></script> -->
</body>

Via NPM

From the CLI run: npm install typer-js

In your project require this library: const typer = require('typer-js')

Use fancy import for inclusion: import typer from 'typer-js'

Files & locations:

| File | Location | Description | | ------------ | -------------------------- | ----------------------------------- | | typer.min.js | node_modules/typer-js/ | minified main file (4k gzipped!) | | typer.css | node_modules/typer-js/ | stylesheet necessary for the cursor | | typer.less | node_modules/typer-js/less | less: use it for your own builds |

Usage

typer(target, speed)

The Typer function itself takes two arguments:

target - two possibilities:
- string - a valid CSS selector, such as '.some-class', '#some-id', or '.a-class .in-a-class', for Typer to grab (with document.querySelector) and type in.
- element - a single DOM element, such as document.body or document.querySelector('div').
speed - (optional) two possibilities:
- number - a number (milliseconds) representing how fast each character should be typed out.
- object - an object specifying the speed. When you want to "humanize" the speed, supply numbers for min and max properties. This will indicate to Typer that you want to "humanize" the speed for all lines (per-line speeds, if provided, override this speed).

* Note: Typer will default to a speed of 70 if nothing is provided.

Now you can begin calling Typer's various methods via simple & sexy dot-notation...

Simple Code Examples

Type a single line:

// Type in the body element.
typer('body').line('Typer.js is awesome!')

// Same example with a DOM element and humanized speed.
typer(document.body, {min: 20, max: 350}).line(
  'Humanizing the speed will look more, uh, human.',
)

// Providing a DOM element and speed.
const element = document.querySelector('#some-id')
typer(element, 100).line('Using a DOM element as the 1st argument works!')

Type a single line, correct mispelling with back:

typer('.some-class').line('This function roolz.').back(5).continue('ules!')

Type a list of frameworks with the help of pause & back:

typer('#some-id')
  .line('Backbone')
  .pause(1000)
  .back('all')
  .continue('Angular')
  .pause(1000)
  .back('all')
  .continue('React!!')

Multi-line typing:

const element = document.querySelector('.my-element')
typer(element).line('How cool is this?').line('So very cool.').line('Agreed!')

Repeat automatically:

// Repeat something forever.
typer('.some-class')
  .line('I love JavaScript.')
  .pause(1000)
  .back('all')
  .repeat(Infinity)

Methods

CURSOR

The .cursor method takes a single argument: false or {an: object}. You can specify the 3 options below within the object. .cursor can be omitted altogether which will result in the default styles mentioned below. Default options need not be given as they will take effect unless otherwise specified.

No cursor

.cursor(false)

Options

block

.cursor({ block: true })

false - (default) The cursor will be a standard vertical line.
true - The cursor will be a block, inspired from older style terminals.

blink

.cursor({ blink: 'hard' });

'soft' - (default) Smooth blinking animation.
'hard' - Binary (on / off) blinking animation.

color

// Examples.
.cursor({ color: 'red' })
.cursor({ color: '#ff0000' })
.cursor({ color: 'rgb(255,0,0)' })
.cursor({ color: 'rgba(255,0,0,0.7)' })

You can specify any css color you want via any method (i.e. name, rgb, hsla, etc.).
As a default, Typer will grab the color attribute of the parent element and use that for the cursor color to match the text with the cursor.

all options at once

.cursor({ block: true, blink: 'hard', color: 'red' })

LINE

// Examples.
.line() // Creates a blank line.
.line('Typer.js is visual awesomeness!')
.line('Typer.js is visual <em>awesomeness!</em>', 100)
.line(['Type. ', 'Whole. ', '<span style="color: yellow;">Words.</span>'], 200)
.line('Typer can "humanize" the speed with min & max values.', {
  min: 30,
  max: 350,
  element: 'p',
  html: false
})
.line('Typer.js is <span style="color: red">visual</span> awesomeness!', {
  speed: 150,
  element: 'span'
})
.line({ // Grab content from a hidden div & type it. #SEO!!!
  container: '.hidden-content',
  element: 'span',
  totalTime: 3500 // Take 3.5 seconds to type it all out.
})
.line('MISSION ACCOMPLISHED', { // Military typing!
  military: {
    chars: 5,
    speed: 50
  }
})

The .line method is at the heart of Typer. As the name suggests, it types out a single line. You can feed it a 'single string', an ['array', 'of', 'strings'], or an options object containing at least a container property. .line defaults to parsing HTML, so you must explicitly tell it not to within the options object.

Arguments

Argument 1 - three possibilities:
- string - The message you want typed out, character by character (normal typing).
- array - The message you want typed out, item by item (word by word).
- object - An options object. If this is the only argument passed to .line, it must have the container property.
Argument 2 (optional) - two possibilities:
- number - A speed in milliseconds. Each line can optionally have its own typing speed. If no speed is given, it defaults to the number given to the typer function itself or Typer's internal default of 70.
- object - An options object. This object will be ignored if you provided an options object to argument 1. This object takes all the same options as the object used in argument 1 minus the container property. Don't provide container with this object, it will be ignored.

* TIP: If you supply no arguments, you will create a blank line.

Options

* NOTE: If you're passing in an options object to argument 1, argument 2 will be ignored.

container

Values:

string - any valid CSS selector
element - a DOM element

.line({ container: '.hidden-content' }) // Valid CSS selector.
.line({ container: document.body }) // Valid DOM element.

SEO in the house! You can tell .line to use the contents of a pre-existing element on the page. So, for instance, you can hide a paragraph of text with CSS (display: none) which will still be indexed by search engines and use it to feed Typer! Amazing.

min / max

Value: number

.line({ container: '.hidden-content', min: 30, max: 350 })
.line('Humanize the speed of typing stuff', { min: 30, max: 350 })

We all want our robot overlord's to be more, uh, human. And so Typer delivers! Typer has the ability to "humanize" the typing speed. Provide min and max properties which define a range within which Typer will pick a random number for each character's typing speed. Voila. It's like a real person typing. Only not.

speed

Value: number

.line({ container: '.hidden-content', speed: 50 })
.line('The speed property is usually specified with other options.', { speed: 100, html: false })
.line("Just use a plain number if you're only specififying speed.", 100)
.line('However, this will work just fine.', { speed: 100 })

When using an options object

Typer

Install / Use

README

Typer.js ·

Quick Links - API Methods

Installation

Manually

Via NPM

Usage

Simple Code Examples

Type a single line:

Type a single line, correct mispelling with back:

Type a list of frameworks with the help of pause & back:

Multi-line typing:

Repeat automatically:

Methods

CURSOR

No cursor

Options

block

blink

color

all options at once

LINE

Arguments

Options

container

min / max

speed