@abikebuk/digitalization
Version:
Text animation themed on glitched/digital text.
65 lines (56 loc) • 2.52 kB
Markdown
# Digitalization Script

Javascript text animation themed on digital/glitched text.
## Features
* Asynchronous animation.
* Every word is print character by character from left to right.
* The animation will always have the size of the word and replace the space of the word that have yet not been print.
* Speed of animation is customizable.
* Multiples modes :
* linear : Random characters are print on the next word's character's place to be print.
* linear_full : Randoms characters are print on each word's character that have not been print yet.
* countdown : A number will be print on the next word's characters to be print.
* countdown_right : A number will be print at the place of the rightest characters of the word.
## Installation
Install the digitalization package.
```
npm install @abikebuk/digitalization
```
import the script.
```js
import { digitalizeLinear, digitalizeLinearFull, digitalizeCountdown, digitalizeCountdownRight } from '@abikebuk/digitalization';
```
Use one of the digitalization function
```js
digitalizeLinear(element, word, speed, nbIteration, skipBlank, blankChar, characters);
```
```js
digitalizeLinearFull(element, word, speed, nbIteration, skipBlank, blankChar, characters);
```
```js
digitalizeCountdown(element, word, speed, skipBlank, blankChar);
```
```js
digitalizeCountdownRight(element, word, speed, skipBlank, blankChar);
```
Arguments explanation :
| Variable | Type | Optional | comment |
|----------|------|----------|---------|
| element | Element| No | Element on the DOM (innerHTML has to be accessible)|
| word | string | No | word to print |
| speed | number | Yes | The speed of each iteration of the animation.|
| skipBlank | boolean | Yes | If true will ignore blank spaces (only the blank space created by clicking on the spacebar button)|
| blankChar | string | Yes | Char printed at the place of each character of the word which have not been print yet |
| characters | string | Yes | Set of character which are print randomly in linear modes.
## example directory
The example directory contains the code used to make the gif on the top of the readme.
## TODO
* Blank space filled with string on top of the char filling.
* Function names change.
* Support for non monospaced font.
* Not left to right modes (reverse / random)?
* More modes?
## To Fix
* Timing is off between linear and countdown modes
## Author
Abikebuk (Rettana Muon) : <rettana.muon@gmail.com>