Check out the interactive demo here.
Text DeScrambler is a jQuery plugin designed to simulate the cliched movie trope of a sequence of characters being descrambled (usually in the context of a hacker realising the password was the bad guy's wife's birthday backwards all along, or whatever).
When called on an element with a text value, the scramble mothod will reveal that value through a process that simulates the 'unscrambling' of each character in the string.
$(".elementToScramble").scramble(4000, 20, "alphabet", true);$element.scramble(duration, interval, characterSet, uppercase)- Description: Time, in milliseconds, over which the deScrambling effect will take place.
- Type: Number.
- Optional.
- Default:
3000. - Min:
1000. - Max:
20000.
- Description: Time, in milliseconds, between each successive character being unscrambled.
- Type: Number.
- Optional.
- Default:
20. - Min:
5. - Max:
1000.
- Description: The character set (from a list of pre-defined character set) to use when substituting scrambled characters in the string.
- Type: String.
- Optional.
- Default:
"all". - Acceptable parameters:
"all"- combination of all character sets."alphanumeric"- all letters and numbers."alphabet"- all letters only."punctuation"- punctuation only."numbers"- numbers only.
- Description: Determines whether the substitued scrambled characters are to be uppercase or lowercase.
- Type: Boolean.
- Optional.
- Default:
true.
- Copy the minimized plugin or annotated plugin to your app's directory:
# EITHER: annotated plugin
curl https://github.com/cjbarnaby/text-descrambler/raw/master/dist/descrambler.js > descrambler.js
# OR: minimized plugin
curl https://github.com/cjbarnaby/text-descrambler/raw/master/dist/descrambler.min.js > descrambler.js- Copy jQuery to your app's directory:
curl https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js > jQuery.js- Create a file for your own custom JavaScript:
touch main.js- Add jQuery and the deScrambler plugin to your HTML:
<head>
<script src="jQuery.js"></script>
<script src="dist/descrambler.js"></script>
<script src="main.js"></script>
</head>
<body>
<p>Here's some text.</p>
</body>- Start scrambling! In your custom
main.jsfile:
$(document).ready(function() {
$("p").scramble();
});- This plugin works best with monospace fonts.
- If
(interval / duration / $el.text().length) < 1, the scrambling sequence will run indefinitely (and never resolve to the element's original text value).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent