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 :sunglasses:

License

MIT License © Hamid Yuksel