ghosttyper

Foreword

This is a fork of the original unamohq/Typist to add a more SM oriented API. Also to add stopping. I will do my best to reply and address issues but if you want to draft up a PR fixing whatever issue you have there's a good chance I'll blindly merge.

Basic GhostTyper

Example

There is an example implementation over in example.html. Clone the repo and open it in your browser to see it in action.

JS

let anchor = document.querySelector("#ghost-anchor")
let ghost = new Ghost(anchor, {
  letterInterval: 60,
}

ghost.display("Or is there???");

HTML

<strong id="ghost-anchor">There's no ghosts here??</strong>

CSS

@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

#ghost-anchor {
  &:after {
    content: " ";
    display: inline-block;
    height: 47px;
    position: relative;
    top: 10px;
    margin-left: 3px;
    margin-right: 7px;
    width: 4px;
    background: #06a44d;
    animation: blink 1s step-start 0s infinite;
    -webkit-animation: blink 1s step-start 0s infinite;
  }
}

.selectedText {
  display: none;
}

Options

Name	Type	Default	Description
selectClassName	string	selectedText	Select element class name
letterInterval	number	60	Number of millis between letter modifications

Requirements

Typist is framework-agnostic. No need for jQuery.

Source code

All efforts have been made to keep the source as clean and readable as possible.

Requirements

GhostTyper is released under an MIT License, so do with it what you will.