Reveal Text By Randomly Shuffling Characters Using jQuery

Have you ever wanted to apply a 'glitching' effect to the text?

This article will show you how to use jQuery script to reveal text by randomly scrambling the letters character by character. This can be useful in creating an eye-catching text reveal effect somewhat like Airport Terminal. Let's get started.

How to use it:

1. Create a group of inline elements containing the intial values of the text.

<div class="example">
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
</div>

2. Load the needed jQuery library at the end of the document.

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

3. The main script for the text shuffle effect. Don't forget to replace the text with your owns.

$(document).ready(function() {

  let $randomnbr = $('.nbr'),
    $timer = 30,
    $it,
    $change,
    $index,
    $data = 0,
    $letters = ['j', 'Q', 'u', 'e', 'r', 'y'];

  $randomnbr.each(function() {

    $change = Math.round(Math.random() * 100);
    $(this).attr('data-change', $change)

  });

  function random() {
    return Math.round(Math.random() * 9);
  }

  function select() {
    return Math.round(Math.random() * $randomnbr.length + 1);
  }

  function value() {
    $('.nbr:nth-child(' + select() + ')').html('' + random() + '');
    $('.nbr:nth-child(' + select() + ')').attr('data-number', $data);
    $data++;

    $randomnbr.each(function() {

      if (parseInt($(this).attr('data-number')) > parseInt($(this).attr('data-change'))) {
        $index = $('.ltr').index(this);
        $(this).html($letters[$index]);
        $(this).removeClass('nbr');
      }
    });

  }

  it = setInterval(value, $timer);

})

---

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