Scrambling Letters Within Text - jQuery Scrambler
| File Size: | 5.01 KB |
|---|---|
| Views Total: | 1435 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Scrambler is a tiny configurable text animation plugin to create a text decoding effect by scrambling and revealing characters one by one.
Additionally, the plugin provides a Typing mode that enables you to reveal the text with a typing effect similar to a typewriter.
See also:
- jQuery Plugin To Animate Text With Random Character - Descrambler
- Create Decoding Effect For Text – ScrambleJS
- Lightweight Text Scrambling JavaScript Plugin – scrambling-letters
How to use it:
1. Load the jquery.scrambler.js plugin after loading jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.scrambler.js"></script>
2. Just attach the function scrambler to the text and we're done.
<h1 class="scramble">jQueryScript.Net</h1>
$(function(){
$("h1").scrambler();
});
3. Animate the text with a typing effect instead.
$("h1").scrambler({
effect: "typing"
});
4. Determine whether to keep whitespaces. If false, the plugin will fill whitespaces with a random character. Default: true.
$("h1").scrambler({
keep_whitespaces: false
});
5. Define the final text the plugin animate to.
$("h1").scrambler({
final_text: 'another text'
});
6. Config the Scrambling or Typing animation with the following parameters .
$("h1").scrambler({
speed : 100,
duration : 3000,
reveal: 1000,
total_iterations : 0,
interval : -1
});
This awesome jQuery plugin is developed by atharvamh. For more Advanced Usages, please check the demo page or visit the official website.











