Author: | dorian305 |
---|---|
Views Total: | 150 views |
Official Page: | Go to website |
Last Update: | August 14, 2022 |
License: | MIT |
Preview:

Description:
Typeme is a vanilla JavaScript library for creating an animated typing effect through an array of strings.
I’m sure you’ve seen this typewriter-like typing effect before and it’s trendy on the Web. This is because the typing animation is so realistic and makes viewers curious about what’s being typed or who we’re talking to.
The plugin is simple, lightweight, customizable, and comes with easy installation instructions. The plugin uses JavaScript animations which means it can be used on all modern browsers without any problems.
How to use it:
1. Download and load the Typeme library in the document.
<script src="src/typeme-min.js"></script>
2. Create an element to hold the text.
<div id="example"> ... </div>
3. Initialize the Typeme plugin and define an array of strings to be animated.
const instance = new TypeMe({ elem: "#example", strings: ["String1", "String2", ...], });
4. Start the Animated Typing Effect.
instance.start();
5. Config the Animated Typing Effect.
const instance = new TypeMe({ elem: "#example", strings: ["String1", "String2", ...], properties: { typeSpeed: 70, backspaceSpeed: 20, pauseAfterFullstop: 500, loop: false, // infinite loop stopOnLastString: true, animationStartDelay: 750, typeStartDelay: 500, backspaceStartDelay: 500, // callbacks onBegin: () => console.log("animation started"), onStringFinished: () => console.log("string finished"), onComplete: () => console.log("animation complete"), }, });
6. Config the blinking cursor displayed at the end of the text while typing.
const instance = new TypeMe({ elem: "#example", strings: ["String1", "String2", ...], cursorProperties: { cursorID: "typingCursorID", cursorClass: "typingCursorClass", cursor: "|", cursorRemoveOnAnimationComplete: true, cursorAnimationSpeed: 2, }, });
7. API methods.
// pause instance.pause(callback); // resume instance.resume(callback); // toggle instance.toggle(callback); // restart instance.restart(callback);
Changelog:
08/14/2022
- Added slight optimization to the cursor animation
08/08/2022
- Added new property: cursorAnimationSpeed