Typing Effect Library

An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements.

Tool Preview

Here is a preview

Typing-effect.mp4

How To Use

Below is a brief tutorial on how to use this Tool.

  • To Begin a new typing effect Initialize the class as follows

import Typed from "./typed.js";

const newText = new Typed()

  • The First Parameter should be the selector of the text element ( In my case a span with a class of auto-text ). Note: Elements are selected with the querySelector method.
const newText = new Typed('.auto-text'}

  • The Second Parameter is an object that takes in five Key-Value pairs (one mandatory, four optional) as shown below.

  {
     // Mandatory. array of strings to be typed
    strings: [],
     // typing-in speed. default value is one
    typeSpeed: number,
     // typing-out speed. default value is one
    backSpeed: number,
     // occur once or forever. default value is false
    loop: boolean,
     // color of insertion point. default value is black
    IPColor: string,
  }

Built With

  • HTML
  • CSS
  • JavaScript

Live

Click here to see the Tool on the Live on The Web

Taking Actions

Instructions on how to access this tool locally:

To Access my project locally please follow the instructions listed below

  • Enter this url: https://github.com/OkoyeCharles/Type-Effect-Library in your web browser.
  • Once opened navigate to the top left level of the project a green code download button will be visible on the righthand side.
  • Select download Zip option from drop down menu.
  • Once the download is complete you will be able to access the tool locally 😀.

Authors

👤 Okoye Charles

🤝 Contributing

If you have a suggestion that would make this better, please fork the repository and create a pull request. You can also simply open an issue with the tag “enhancement”. Remember to support the project with a star.

GitHub

View Github