Airport-like Text Shuffle Animation In jQuery

A jQuery script that applies an airport terminal-like text shuffle effect on every single letter or character present inside a container.

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

How to use it:

1. Create the placeholder elements with default values as follows:

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

2. Load the needed jQuery JavaScript library in the document.

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

3. Specify the letters to present.

var letters = ["j", "Q", "u", "e", "r", "y", "S", "c", "r", "i", "p", "t", "n","e", "t"];

4. The main JavaScript (jQuery script) to activate the text shuffle animation.

var $randomNumber = $('.nbr');
var $timer = 30;
var $it;
var $data = 0;
var index;
var change;

$randomNumber.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() * $randomNumber.length + 1);
};

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

  $randomNumber.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 stefaneacsu147. For more Advanced Usages, please check the demo page or visit the official website.