phantom-typewriter-effect

The phantom-typewriter-effect library provides a simple, yet powerful way to add a typewriter effect to your web elements. Leveraging the robust typed.js library, it offers customizable typing animations that can enhance the user experience of your website.

Installation

To install the library, run the following command in your project directory:

npm install phantom-typewriter-effect

Usage

First, make sure to import PhantomTypewriterEffect into your project:

import PhantomTypewriterEffect from 'phantom-typewriter-effect';

Then, you can initialize the effect by specifying the ID of the element you want to apply the typewriter effect to, and optionally, passing an options object to customize the effect:

const typewriter = new PhantomTypewriterEffect('elementId', {
  strings: ['First sentence.', 'Second sentence.'],
  typeSpeed: 50,
  backSpeed: 50,
  loop: true,
});

Options

The options object allows you to customize the typewriter effect. The following options are available:

• strings: An array of strings to be typed out. Default is ["Sample text..."].
• typeSpeed: The speed (in milliseconds) at which the text is typed. Default is 50.
• backSpeed: The speed (in milliseconds) at which the text is deleted. Default is 50.
• loop: A boolean indicating whether the typing animation should loop. Default is true.

Example

HTML:

<div id="elementId"></div>

JavaScript:

new PhantomTypewriterEffect('elementId', {
  strings: ['Hello, world!', 'Welcome to my website.'],
  typeSpeed: 30,
  backSpeed: 30,
  loop: true,
});

Contributing

Contributions are welcome! Please feel free to submit a pull request or create an issue for any bugs or feature requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

For more information on Typed.js and its options, visit Typed.js documentation.