https://github.com/gigabyte5671/autotype

A simple auto-typing/typewriter effect written in vanilla JS.
https://github.com/gigabyte5671/autotype

autotype-effect javascript javascript-library typewriter-effect

Last synced: about 1 month ago
JSON representation

A simple auto-typing/typewriter effect written in vanilla JS.

• Host: GitHub
• URL: https://github.com/gigabyte5671/autotype
• Owner: Gigabyte5671
• Created: 2021-10-11T08:21:26.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-18T23:43:19.000Z (about 1 year ago)
• Last Synced: 2024-12-18T19:11:06.427Z (about 1 month ago)
• Topics: autotype-effect, javascript, javascript-library, typewriter-effect
• Language: CSS
• Homepage: https://autotype.zakweb.dev/
• Size: 37.1 KB
• Stars: 0
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# AutoType JS

A simple auto-typing/typewriter effect written in vanilla JS.  

Just 470 bytes :sparkles:

  

[Demo](https://autotype.zakweb.dev/)

### Usage:

Include:

```html

```

Or download the files you want from the releases page.  

  

To add the effect to an element, call the `AutoType()` function with the following arguments:

- A reference to the element, or its ID.

- The string you want typed.

- And optionally, the delay (in ms) between typed characters.

```javascript

AutoType("element_ID", "Your Text Here", character_delay);

```

`AutoBackspace()` can also be called with the same arguments (except the string to be typed) to get a backspacing effect:  

```javascript

AutoBackspace("element_ID", character_delay);

```

Both of these functions can be `await`ed so you can run your own code after the effects have finished.

```javascript

await AutoBackspace("element_ID");

// Or

AutoBackspace("element_ID").then(() => {

	// Do something awesome

});

```

  

### CSS:

You can also use autotype.css to add a blinking cursor to the end of your autotyped text. Just add the `autotype_horizontal_cursor` or `autotype_vertical_cursor` class to the text element:

```html

  

  

Horizontal cursor!_

Vertical cursor!|

```


> [!NOTE]  

> Using either of these classes will set the text element's position to relative.