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;
    }
}