JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<ul id="text">
    <li>4032 London</li>
    <li>5901 Paris</li>
    <li>9954 Cologne</li>
    <li>4204 St. Petersburg</li>
</ul>
<p>&#8593; Click</p>

CSS

#text{cursor:pointer;overflow:hidden;font:40px/1 monospace;}
#text span{display:block;float:left;background:#444;
    color:#fff;margin-right:1px;}

JavaScript

$.fn.ticker = function( options ) {
    
    options = $.extend({
        uppercase: true,
        extra: ',.:+=/()',
        speed: 30
    }, options);
    
    var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
    
    if ( !options.uppercase ) {
        alph = alph + alph.toLowerCase();
    }
    alph = '01234567890'+alph + options.extra + ' ';
    
    return this.each(function() {
        var k = 1,
            elems = $(this).children(),
            arr = alph.split(''),
            len = 0,
            fill = function( a ) {
                while( a.length < len ) {
                    a.push(' ');
                }
                return a;
            },
            texts = $.map( elems, function( elem ) {
                var text = $(elem).text();
                len = Math.max(len, text.length);
                return options.uppercase ? text.toUpperCase() : text;
            }),
            target = $('<div>'),
            render = function(print) {
                target.data('prev', print.join(''));
                fill(print);
                print = $.map(print, function(p) {
                    return p == ' ' ? '&#160;' : p;
                });
                return target.html('<span>' + print.join('</span><span>') + '</span>');
            },
            attr = {}
        
        $.each(this.attributes, function(i, item) {
            target.attr( item.name, item.value );
        });

        $(this).replaceWith( render( texts[0].split('') ) );
        
        target.click(function(e) {

            var next = fill(texts[k].split('')),
                prev = fill(target.data('prev').split('')),
                print = prev;
            
            $.each(next, function(i) {
                if (next[i] == prev[i]) {
                    return;
                }
                var index = alph.indexOf( prev[i] ),
                    j = 0,
                    tid = window.setInterval(function() {
                        if ( next[i] != arr[index] )...