Skip to content

yukseltron/txt-fx

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM Version

txt-fx

Customizable text effects!

Table of contents

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

Scrambler.scramble

Scrambles the text with random characters in random order.

scrambler

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.

Shuffler

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.

Replacer

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