Airport-like Text Shuffle Animation In jQuery
File Size: | 2.14 KB |
---|---|
Views Total: | 4941 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.