JSFiddle - React, Tailwind, and code Playground

by mrmartineau

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]) {
                            index = index ==...