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.

import { digitalizeLinear, digitalizeLinearFull, digitalizeCountdown, digitalizeCountdownRight } from '@abikebuk/digitalization';

Use one of the digitalization function

digitalizeLinear(element, word, speed, nbIteration, skipBlank, blankChar, characters);

digitalizeLinearFull(element, word, speed, nbIteration, skipBlank, blankChar, characters);

digitalizeCountdown(element, word, speed, skipBlank, blankChar);

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) : [email protected]