Scrambling/Decoding Effect For Text - jQuery Codex

Codex is a small jQuery text animation plugin which applies a decoding effect to text by scrambling the letters randomly and revealing the original characters one by one.

See also:

• Airport-style Shuffle Text Effect With jQuery - TextShuffle.js
• Watch Dogs Like Text Shuffle Animation – swapdogs.js
• Create A Random Text Shuffle Effect With jQuery - Randomize Text
• Shuffle Letters Effect In Pure JavaScript – shuffle-letters.js
• Random Shuffled Text Effect with jQuery Chaffle Plugin
• Simple Text Shuffle Effect with jQuery - Shuffle Text
• Airport-like Text Shuffle Animation In jQuery
• Lightweight Text Scrambling JavaScript Plugin – scrambling-letters
• Create Decoding Effect For Text – ScrambleJS

How to use it:

1. Download and put the Codex plugin after loading jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.codex.js"></script>

2. Attach the function to the element containing the text to animate. Done.

<h1 class="codex" id="codex">jQueryScript</h1>

$(function(){
  $("#codex").codex();
});

3. Determine whether to animate the characters one by one. Default: 'allofasudden'.

$("#codex").codex({
  effect: "charbychar"
  reveal: 1000 // the number of miliseconds
});

4. Or print the text character by charecter just like a typewriter.

$("#codex").codex({
  effect: "typewriter"
});

5. Determine whether to keep whitespaces. Default: true.

$("#codex").codex({
  keep_whitespaces : false
});

6. The plugin also allows you to animate one text to another.

$("#codex").codex({
  final_text: "CSSSCRIPT.COM"
});

7. Customize the animation speed. Default: 100ms.

$("#codex").codex({
  speed : 200
});

8. Customize the duration of the animation speed. Default: 3000ms.

$("#codex").codex({
  duration : 1000
});

Changelog:

2020-05-25

• New 'typewriter' effect.

---

This awesome jQuery plugin is developed by minimo-io. For more Advanced Usages, please check the demo page or visit the official website.