typewriter-effect-js
v1.0.0
Published
A lightweight, customizable JavaScript library that creates a typewriter effect for text on your webpage.
Downloads
66
Readme
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