Author: | sogoagain |
---|---|
Views Total: | 2,287 views |
Official Page: | Go to website |
Last Update: | January 15, 2022 |
License: | MIT |
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’