JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<div id="baer"></div>

CSS

#baer {
    border: 1px solid #6875B8;
    width:400px;
    height:175px;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    color: #F7931E;

}
#baer div {
    white-space: nowrap;
    text-align: center;
    text-shadow: 1px 1px 1px #999;
    filter: dropshadow(color=#999, offx=1, offy=1);
    font-family: sans-serif;
    font-weight: bold;
}
.extra {
    color: #6875B8
}

JavaScript

//'0text'   '1font-size'   '2start margin-top'   '3stop margin-top'
    //                         '4start margin-left'    '5stop margin-left'
    var txt = [
        ["7-9 февраля 2012 г.", '40px', '55px', 55, '900px', 0],
        ["Крокус-Экспо, Москва", '34px', '55px', 55, '-900px', 0],
        ["14-я выставка и конференция", '25px', '-160px', 60, '0px', 0],
        ["CSTB'<b style='color:red'>2012</b>", '71px', '-430px', 40, '-5730px', 0],
        ["Спутниковая связь", '39px', '-160px', 50, '0px', 0],
        ["Широкополосный интернет<br>ИндиVSAT", '28px', '-160px', 45, '0px', 0],
        ["Коллективный интернет", '32px', '-160px', 60, '0px', 0],
        ["VSAT + Wi-Fi", '60px', '-160px', 47, '0px', 0],
        ["Новые партнерские<br>программы", '38px', '-160px', 30, '0px', 0],
        ["Приглашаем на<br>стенд AltegroSky", '45px', '-160px', 30, '0px', 0],
        ["павильон 1,<br>зал 2,<br>стенд №212", '45px', '-160px', 5, '0px', 0]
    ];
    var i = -1;
    var extr = /^(0|1|2|3|8|10)$/;
    $('#baer').click(function () {
        top.location.href = 'http://www.altegrosky.ru/new_406_detail.html';
    }).append('<div>');
    (function go() {
        if (i >= txt.length - 1) {
            i = -1;
        }
        i++;

        if (i == txt.length - 2) {
            dela = 2000;
        } else if (i == 3) {
            dela = 1000;
        } else {
            dela = (txt[i][0].length * 70).toFixed(0);
        }

        if (extr.test(i)) {
            $('#baer div').addClass('extra');
        } else {
            $('#baer div').removeClass('extra');
        }

/////////////////////
        if (i == 3) {
            $('#baer div').html(txt[i][0]).css({
               'font-size': '50em',
                'margin-top': txt[i][2],
                'margin-left': txt[i][4]
            }).show().animate({
                marginTop: txt[i][3],
                marginLeft: txt[i][5],
                fontSize: txt[i][1]
            }, 1000).delay(dela).fadeOut('slow',...