Clickety

Make rich typewriter effects

Demo

live demo

Installation

NodeJS

npm install --save clickety

Script

Browser scripts at /dist/clickety.min.js

This library uses Promise, so you might need promise-polifill for IE.

Usage

Create a typer instance.

const typer = new Clickety('.area')

Example

<div class="area"></div>

const typer = new Clickety(".area")
 
//sequences of actions
typer
    .init()
    .type("Hello! ", 150)
    .type("this is ", 100)
    .type("clickety", 200)
    .prev(7, 80)
    .backspace(1, 100)
    .type("C", 200)
    .prev(9, 80)
    .enter(100)
    .end(500)
    .type(".",80)

Constructor

constructor(element, settings)

parameters

name	description	type	default
element	Set the container.	DOM Eelement
settings.container_class	Set the class of the container.	String	'clickety_container'
settings.line_class	Set the class of each line.	String	'clickety_line'
settings.text_class	Set the class of each text block.	String	'clickety_text'
settings.cursor_class	Set the class of the cursor.	String	'clickety_cursor'
settings.cursor	Set the innerHTML of the cursor.	String	'|'

Methods

Here are typer instance's methonds.

All parameters about time are using milliseconds.

method	description	parameters
init	Initialize the typeing area, this must be called to init the container.	init()
type	Type words.	type(string, speed)
pause	pause	pause(ms)
enter	Press enter.	enter(delay)
backspace	Press backspace.	backspace(times, speed)
delete	Press delete.	delete(times, speed)
prev	Press left.	prev(times, speed)
next	Press right.	next(times, speed)
end	Move cursor to the end of the line.	end(delay)
home	Move cursor to the start of the line.	home(delay)
then	Add callback to Promise chain.	then(callback)

CSS

Css file at /dist/clickety.css,

or you can just copy belows to your custom style sheets.

.clickety_text {
    display: inline-block;
    min-height: 1rem;
}
 
.clickety_cursor {
    margin: 0 -0.5rem;
    display: inline-block;
    width: 1rem;
    text-align: center;
    animation: blink 1.2s infinite;
}
 
@keyframes blink {
    0%,60% {
        opacity: 1;
    }
    61%, 100% {
        opacity: 0;
    }
}