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.

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.

Check Here – JavaScript Library To Animate Placeholder Text In Input Fields

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>

Options

PropertyTypeDescription
timeoutnumberrequired Timeout until the next element is been written/deleted
speednumberrequired The velocity of typing effect
speedVariationnumberA variation for the speed property. So it is not too linear
loopbooleanRestart after reaching the last text in the list
errorQuotanumberThe quota of typos injected in the text
errorCharacterMapstringA custom string of characters is used for the typo errors.
cursorstringThe character of the cursor like / or _
cursorSpeednumberSpeed of the blinking animation

Mimic Human Typing, Write and Delete Plugin/Github, simulate user input javascript, javascript simulate typing

Read More – 

[Command] Creating Web-Based Terminals | jQuery Terminal Emulator
Simple And Easy jQuery Plugin To Highlight .NET Stack Effects | netStack.js

Write and Delete


See Demo And Download

Official Website(faebeee): Click Here

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

Share