Press "Enter" to skip to content

Animate Type of Effect Through The List of Strings | Write and Delete

Write and Delete is a small js library to trigger some writing effects through the list of strings. It also supports typos settings, to make them more bearable for a human. This JavaScript library simulates realistic human writing behavior on the web.

typing and erasing animation css, typing and erasing animation css codepen, react typing animation loop, typewriter effect, javascript typing animation

Note Generators are used, so they are only supported in modern browsers.

Features:

  • Classify by group of strings.
  • infinite loop.
  • Custom share of typos.
  • The indicator flashes.

How to make use of it:

1. Import the Write and Delete.

<script src="dist/lib.js"></script>
// or as a web component
<script src="dist/webcomponent.js" defer></script>

2. Initialize the library and outline an array of strings to be printed on the web page.

writeAndDelete(document.querySelector("#container"), [
  "Text to type 1",
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // options here
});

3. You can even use it as a web element.

<write-and-delete>String1, String2, String3, String4</write-and-delete>

4. Possible choices to config the typing animation.

writeAndDelete(document.querySelector("#container"), [
  `Text to type 1`,
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // timeout in ms
  timeout: 1000,
  // animation speed
  speed: 300,
  // variation for the speed option
  speedVariation: undefined,
  // infinite loop
  loop: true,
  // quota of typos
  errorQuota: 0
  // Custom string of characters used for the typo errors
  errorCharacterMap: undefined,
  // custom cursor
  cursor: '_',
  // speed of binking animation
  cursorSpeed: undefined,
});
// or 
<write-and-delete timeout="1000" loop="true" speed="200">String1, String2, String3, String4</write-and-delete>

Mimic Human Typing, Write and Delete Plugin/Github, simulate user input javascript, css typing animation multiple lines, javascript simulate typing

Write and Delete


See Demo And Download

Official Website(faebeee): Click Here

This superior jQuery/javascript plugin is developed by faebeee. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.