JavaScript Library For Scrambling Text – cryptoWriter

Category: Animation , Javascript , Text | June 1, 2021
Author:keshav-bajaj
Views Total:58 views
Official Page:Go to website
Last Update:June 1, 2021
License:MIT

Preview:

JavaScript Library For Scrambling Text – cryptoWriter

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"]
});

You Might Be Interested In:


Leave a Reply