Press "Enter" to skip to content

[scrambling-text-js] How to Text Scramble/Shuffle Effect in JavaScript

Javascript Text Scramble Effect – A very simple javascript library written in vanilla js for scrambling text. Just one other JavaScript library used to create a refined scrambling/shuffling/decoding impact for any textual content you present.

It additionally has the power to create a textual content rotator the place a bunch of textual content is displayed in sequence, with a scrambling impact.

shuffle text animation, scramble text javascript, shuffle animation css, text effect, canvas text animation effects, text reveal animation css, word scramble effect

How to make use of it:

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

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

2. Or instantly load the β€˜scrambling-text.js’ within the doc.

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

3. Create a brand new Scrambler instance.

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

4. Scramble any textual content you present.

scrambler.scramble('- webcodeflow.com -');

5. Execute a perform after the scrambling impact is completed.

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

6. Create a textual content rotator with a textual content scrambling impact.

const TEXTS = [
      '- webcodeflow.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();

Word Scrambler/Shuffle Effect, Scrambling/Decoding Effect For Text, Text Scramble Effect CSS, Text Scramble Effect JS


See Demo And Download

Official Website(sogoagain): Click Here

This superior jQuery/javascript plugin is developed by sogoagain. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *