Flexible Text Typing Effect In Vanilla JavaScript – malarkey

Category: Animation , Javascript | March 27, 2018
Author: yuanqing
Views Total: 583 views
Official Page: Go to website
Last Update: March 27, 2018
License: MIT

Preview:

Flexible Text Typing Effect In Vanilla JavaScript – malarkey

Description:

malarkey.js is a vanilla JavaScript plugin to create flexible text typing/deleting effects just like the typewriter.

How to use it:

Installation.

# Yarn
$ yarn add malarkey

# NPM
$ npm install malarkey --save

Include the compiled version of the malarkey.js on the web page.

<script src="malarkey.js"></script>

Create a container where you want to print out the text.

<div class="typewriter"></div>

Initialize the malarkey library and we’re ready to go.

malarkey()

Start typing your text with the following methods.

malarkey()
  .type('CSS') // type
  .pause() // pause
  .delete() // delete
  .type('Script')
  .pause()
  .delete()

Options and callback functions:

const element = document.querySelector('.typewriter')

function callback (text) {
  element.textContent = text
}

const options = {
      typeSpeed: 50,
      deleteSpeed: 50,
      pauseDuration: 2000,
      repeat: false
}

malarkey(callback, options)

Full API methods.

malarkey()

  // type 
  .type(string, options)

  // pause
  .pause(options)

  // delete
  .delete(characterCount, options)

  // clear
  .clear()

  // calls the given fn function.
  .call(fn)

  // stops the sequence
  .triggerStop(fn)

  // resumes the sequence
  .triggerResume()

  // returns true if the sequence is currently stopped
  .isStopped()

You Might Be Interested In:


Leave a Reply