2.0.1 • Published 3 years ago

write-and-delete v2.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

Write and Delete

Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more human likely.

Note It uses generators, so it's only supported in more modern browsers.

Demo

Demo

Codepen

Usage

JavaScript

Import the library

<script src="https://unpkg.com/write-and-delete@VERSION/dist/lib.js"></script>

and then it's available in the global window scope.

  writeAndDelete(document.querySelector("#header"), [
    "Buenos dias",
    "Good morning",
    "Guten Morgen ",
    "Buon giorno",
], {
    timeout: 1000,
    loop: true,
    speed: 200,
    errorQuota: 0.5,
    cursor: '_',
    cursorSpeed: 300,
});

Web Component

this library is also available as a webcomponent.

Import the component

<script src="https://unpkg.com/write-and-delete@VERSION/dist/webcomponent.js"></script>

and then set it up in your markup

<h1>
    <write-and-delete timeout="1000" loop="true" speed="200">JavaScript, HTML5, CSS3</write-and-delete>
</h1>

Options

PropertyTypeDescription
timeoutnumberrequired Timeout until next element is been written/deleted
speednumberrequired 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
errorQuotanumberQuota of typos injected in the text
errorCharacterMapstringCustom string of characters used for the typo errors.
cursorstringCharacter of the cursor like / or _
cursorSpeednumberSpeed of the blinking animation
2.0.1

3 years ago

2.0.0

3 years ago

1.0.0

3 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago