scrambling decoding text codex - Free Download Scrambling/Decoding Effect For Text - jQuery Codex

Free Download Scrambling/Decoding Effect For Text – jQuery Codex

Posted on

This time I will share jQuery Plugin and tutorial about Scrambling/Decoding Effect For Text – jQuery Codex, hope it will help you in programming stack.

scrambling decoding text codex - Free Download Scrambling/Decoding Effect For Text - jQuery Codex
File Size: 11.7 KB
Views Total: 1267
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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

2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous"></script>
4 <script src="jquery.codex.js"></script>

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

1 <h1 class="codex" id="codex">jQueryScript</h1>
1 $(function(){
2   $("#codex").codex();
3 });

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

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

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

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

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

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

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

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

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

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

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

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

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.