For my contact page I wanted a simple text animation.
In my early days as a post production guy I worked with the randomize text effect in Adobe afterFX.



Since I didn’t found any javascript library, I worked on a jQuery plugin myself.

It is straightforward to use. Create a container with id-attribute and define some text as argument.

<div id="id"></div>

<script type="text/javascript">
  $('#id').randomizeText({text: "my text"});
</script>

You can use text from within the dom element. Like in this example. Every text will render separately.

<div class="text">some text 1</div>
<div class="text">some text 2</div>
<div class="text">some text 3</div>

<script type="text/javascript">
  $('.text').randomizeText();
</script>

Here are the options. You can modify them to alter the animation.

options = {
  text: '', // content for the dom - overwrites present content
  refreshRate: 50, // refresh rate for the animation 50 = 20 "Frames" per Second
  timePerLetter: 50, // time till next letter pops up
  randomTime: 50, // refresh rate for the next random letter
  maxRandomTries: 10, // maximum tries till the correct letter pops up
  randomLetters: '' // custom random letters - if empty it will uses letters from text
}

I’ve got one issue left. It should be possible to overwrite the current process, but the only quick workaround right now is to remove the current dom and recreate it.

And of course, it needs refactoring. It could be more elegant. I have Javascript - The good parts for a long time on my todo list. I will catch up on this topic after reading this book.