cryptoWriter.js

1.Usage

Load cryptoWriter.js and configure. index.html

<div id="container">
  <div id="myElement">Some Text</div>
</div>

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

app.js

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

That's it! You are now running cryptoWriter.js!

The library uses ".innerText" property so be sure to select the element which immediately contains the text and not its parent container.

2.Options

Defaults

new cryptoWriter({
  randomRounds:5,
  completionTime:"auto",
  onVisible:true,
  delayTime:0.05,
  untilDelay:"random",
  enabledSets:["letters","lettersCaps","numbers"],
  allAtOnce:false
});

2.1 randomRounds

• Type:Number
• Determines the number of random strings of characters displayed before the actual text.

2.2 completionTime

• Type:Number/String
• Time taken for rendering to complete in seconds.
• Its default value is set to "auto", which calculates completion time at 5 characters/second.
• If you want to set the speed in terms of chars/second, simply put the value as follows replacing "6" with your desired number.

 new cryptoWriter({
   completionTime:"6chars"  
 });

2.3 delayTime

• Type:Number
• Time delayed in rendering in seconds.

2.4 onVisible

• Type:Boolean
• Set true if you want the rendering to start once the element is in viewport

2.5 untilDelay

• Type:String
• Determines what to do until rendering begins.

2.6 enabledSets

• Type:Array
• Choose the source of random characters.

To disable all sets leave the array empty. To enable all sets, set the value to 'all'.

Inbuilt Sets

2.7 customSet

• Type:Array

• Create and use a custom set of characters by using this option.

• Example:

  new cryptoWriter(document.querySelector("#myElement"),{
  customSet:["$","@","%","5","9","3","a","j"],
  enabledSets:[]
  });

• You can also use customSet along with enabledSets.

Using emojis as custom set

var emojis = "😀😃😄😁😆😅😂🤣🥲😊😇🙂🙃😉😌";
emojis = Array.from(emojis);
new cryptoWriter(document.querySelector("#myElement"),{
customSet:emojis,
enabledSets:[]
});

2.8 allAtOnce

• Type:Boolean
• Controls if text appears one character at a time or all together.
• Set this to true if you want all the text to appear at once.

3. Using with jQuery

var myElement = $("#myElement").get(0);
new cryptoWriter(myElement);

4. cryptoWriter.js Generator

If you want to play around with the options or want to generate cryptoWriter code for yourself, head over to the Generator.

Enjoy :)