Text Scramble/Shuffle Effect – scrambling-text-js

Preview:

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:

• Lightweight Text Scrambling JavaScript Plugin – scrambling-letters
• Create Decoding Effect For Text – ScrambleJS

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. Customize the characters to use when scrambled.

scrambler.scramble(text, handleScramble, {
  characters: ['c', 's', 'r'],
});

7. 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();

Changelog:

v1.2.0 (01/15/2022)

• rename option parameter ‘charactersToUseWhenScrambling’ to ‘characters’