https://github.com/faebeee/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.
https://github.com/faebeee/write-and-delete

animation javascript js typing ui webcomponent

Last synced: 11 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/faebeee/write-and-delete
• Owner: faebeee
• Created: 2021-03-21T12:42:47.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-03-28T14:36:17.000Z (over 3 years ago)
• Last Synced: 2024-10-12T05:06:50.817Z (about 1 month ago)
• Topics: animation, javascript, js, typing, ui, webcomponent
• Language: JavaScript
• Homepage: https://faebeee.github.io/write-and-delete/
• Size: 3.09 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://faebeee.github.io/write-and-delete/)

![Demo](https://raw.githubusercontent.com/faebeee/write-and-delete/master/assets/write_with_error.gif)

## [Codepen](https://codepen.io/faebeee/pen/vYyoPqY)

## Usage

## JavaScript 

Import the library

```html

``` 

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

```js

  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 

```html

```

and then set it up in your markup

```html



    JavaScript, HTML5, CSS3



```


## Options

Property | Type | Description

---|---|---

timeout | `number` | `required` Timeout until next element is been written/deleted

speed | `number` | `required` Velocity of typing effect

speedVariation | `number` | A variation for the `speed` property. So it is not too linear

loop | `boolean` | Restart after reaching the last text in the list

errorQuota | `number` | Quota of typos injected in the text

errorCharacterMap | `string` | Custom string of characters used for the typo errors.

cursor | `string` | Character of the cursor like `/` or `_`

cursorSpeed | `number` | Speed of the blinking animation