Customizable text effects!
To install for your project run:
npm i txt-fxSimply 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);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.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 |
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 |
npm test- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Add your changes:
git add . - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request 😎
MIT License © Hamid Yuksel