Text Scramble/Shuffle Effect – scrambling-text-js

Category: Animation , Javascript , Text | August 24, 2020
Author:sogoagain
Views Total:370 views
Official Page:Go to website
Last Update:August 24, 2020
License:MIT

Preview:

Text Scramble/Shuffle Effect – scrambling-text-js

Description:

Just another JavaScript library used to create a subtle scrambling/shuffling/decoding effect for any text you provide.

It also has the ability to create a text rotator where a group of text is displayed in sequence, with a scrambling effect.

See Also:

How to use it:

1. Install and import the scrambling-text-js.

# NPM
$ npm i scrambling-text --save
import Scrambler from 'scrambling-text';

2. Or directly load the ‘scrambling-text.js’ in the document.

<script src="./scrambling-text.js"></script>

3. Create a new Scrambler instance.

const scrambler = new Scrambler();
// for browser
const scrambler = new window.Scrambler();

4. Scramble any text you provide.

scrambler.scramble('- CSSScript.Com -');

5. Execute a function after the scrambling effect is finished.

const handleScramble = (text) => {
  console.log(text);
}
scrambler.scramble('- CSSScript.Com -', handleScramble);

6. Create a text rotator with a text scrambling effect.

const TEXTS = [
      '- CSSScript.Com -',
      'Text 2',
      'Text 3',
];
const scrambler = new window.Scrambler();
const handleScramble = (text) => {
  document.getElementById('text').innerHTML = text;
}
let i = 0;
function printText() {
  scrambler.scramble(TEXTS[i % TEXTS.length], handleScramble); 
  setTimeout(printText, 5000);
  i++;
}
printText();

You Might Be Interested In:


Leave a Reply