JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q9246F
  • License MIT

Customizable text effects

Package Exports

  • txt-fx
  • txt-fx/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (txt-fx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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