txt-fx

Customizable text effects!

Table of contents

• Installation
• Usage
  • Scrambler
  • Shuffler
  • Replacer
• Contributing
• Built With
• License

Installation

To install for your project run:

npm i txt-fx

Usage

Simply import the package

import TextFX from 'txt-fx'

Then create an instance of the effect you want and give it the target element.

const fx = new TextFX.Scrambler();
const element = document.querySelector('#headline');
fx.scramble(element);

Effects

• Scrambler
• Shuffler
• Replacer

Scrambler

Scrambler.scramble

Scrambles the text with random characters in random order.

const { scramble } = new TextFX.Scrambler();
scramble(element, delay, count, restore);

Parameter	Type	Default value	Description
element	element	-	target element
delay	number	400	delay between changes
count	number	infinity	number of iterations
restore	boolean	false	restore text at end of count
items	string[]	[ '@', '#', '$', ...]	random characters to use

Shuffler

Shuffler.shuffle

shuffles the text's order in place.

const { shuffle } = new TextFX.Shuffler();
shuffle(element, delay, count, restore);

Parameter	Type	Default value	Description
element	element	-	target element
delay	number	400	delay between changes
count	number	infinity	number of iterations
restore	boolean	false	restore text at end of count

Replacer

Replaces each char sequentially with a given char or a char from a list of chars.

const { replace } = new TextFX.Replacer();
replace(element, delay, restore, char);

Parameter	Type	Default value	Description
element	element	-	target element
delay	number	400	delay between changes
restore	boolean	false	restore text at end of count
char	string || string[]	█	replacement chars

Running the tests

npm test

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request 😎

License

MIT License © Hamid Yuksel