typewriter-effect-js v1.0.0

Typewriter Effect

A lightweight, customizable JavaScript library that creates a typewriter effect for text on your webpage.

Features

• Smooth typing and deleting animation
• Customizable typing and deleting speeds
• Adjustable pauses between phrases
• Easy to integrate with any HTML element
• Lightweight and dependency-free

Installation

npm i typewriter-effect-js

import Typewriter from 'typewriter-effect-js'

Usage

  const phrases = ["developer", "designer", "hacker"];

  const typewriter = new Typewriter(".typewriter", phrases);

  typewriter.start();

Api

new Typewriter(selector, phrases, options)

• selector: A CSS selector for the target element (string)
• phrases: An array of strings to be typed

• options: An object with the following optional properties:

  • typingSpeed: Time between each character typed (in milliseconds, default: 50)

  • deletingSpeed: Time between each character deleted (in milliseconds, default: 30)

  • pauseBeforeDelete: Time to wait before starting to delete the phrase (in milliseconds, default: 2000)

  • pauseBeforeNextPhrase: Time to wait before typing the next phrase (in milliseconds, default: 500)

Methods

• start(): Begins the typewriter effect
• stop(): Stops the typewriter effect

Customization

You can easily customize the typing effect by adjusting the options when initializing the Typewriter class. For example:

const typewriter = new Typewriter(".typewriter", phrases, {
  typingSpeed: 80,
  deletingSpeed: 40,
  pauseBeforeDelete: 3000,
  pauseBeforeNextPhrase: 1000,
});

License

This project is open source and available under the MIT License.

Author

@RootWRX