Press "Enter" to skip to content

jQuery Plugin Applies a Scrambling / Decoding / Typewriter Effect | Text Scrambler

Scrambler is a small text animation plugin that can be configured to create the effect of text decoding by scrambling and revealing characters one by one.

text scramble effect, decoding text animation, canvas text animation effects, text animation examples, intro text animation html css, text animation javascript

How to make use of it:

1. Load the jquery.scrambler.js plugin after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.scrambler.js"></script>

2. Just connect the function scrambler to the text and we’re achieved.

<h1 class="scramble">WebCodeFlow</h1>
$(function(){
  $("h1").scrambler();
});

3. Animate the text with a typing impact as an alternative.

$("h1").scrambler({
  effect: "typing"
});

4. Determine whether or not to keep whitespaces. If false, the plugin will fill whitespaces with a random character.

$("h1").scrambler({
  keep_whitespaces: false
});

5. Define the ultimate text the plugin animate to.

$("h1").scrambler({
  final_text: 'another text'
});

6. Config the Scrambling or Typing animation with the next parameters.

$("h1").scrambler({
  speed : 100,
  duration : 3000,
  reveal: 1000,
  total_iterations : 0,
  interval : -1
});

Scrambling Letters Within Text, Text Scrambler Plugin/Github, shattering text animation css, pure css confetti explosion

Scrambling-Decoding-Typewriter-Effect-Demo


See Demo And Download

Official Website(atharvamh): Click Here

This superior jQuery/javascript plugin is developed by atharvamh. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *