JavaScript Library For Scrambling Text – cryptoWriter

Preview:

Description:

Just another text scramble effect library that reveals text with a random character shuffle/decode effect.

How to use it:

1. Import the cryptoWriter library into the document.

<script src="src/cryptoWriter.min.js"></script>

2. Apply the cryptoWriter to any text as shown below. That’s it.

<h1 id="basic">cryptoWriter Examples</h1>

new cryptoWriter(document.querySelector("#basic"));

3. Available options to config the text scramble effect.

new cryptoWriter(document.querySelector("#basic"),{
    // the number of random strings of characters displayed before the actual text
    randomRounds: 5,
    // ["letters", "numbers", "lettersCaps", "specialChars"]
    enabledSets: ["letters", "numbers", "lettersCaps"],
    // start the effect when the element is in the viewport
    onVisible: true,
    // delay time
    delayTime: 0.05,
    // or "same", "empty"
    untilDelay: "random",
    // anmation speed
    // auto = 5 characters/second
    // possible values: "6chars", ...
    completionTime: "auto",
    // determine if text appears one character at a time or all together
    allAtOnce: false,
});

4. You can also define an array of custom characters for the text scramble effect.

new cryptoWriter(document.querySelector("#basic"),{
    customSet:["$","@","%","1","2","3","4","5"]
});