cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual text.
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.
Value |
What it does |
---|---|
random |
Displays a random string until rendering begins. |
same |
Displays the actual text until rendering begins. |
empty |
Displays nothing until rendering begins. |
To display text of your choice simply put that text instead of the above values |
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
Name |
Characters |
---|---|
letters |
abcdefghijklmnopqrstuvwxyz |
lettersCaps |
ABCDEFGHIJKLMNOPQRSTUVWXYZ |
numbers |
0123456789 |
specialChars |
!@#$%^&*(`)-=[]|\;',./~_+{}:"<>? |
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.