JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<div style="width:300px" id="baer"></div>

CSS

#baer {
    border: 1px solid #6875B8;
    /* width:400px; назначается в теге*/
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    color: #F7931E;
 
}
#baer div { /*background:red; */
    white-space: nowrap;
    text-align: center;
    text-shadow: 1px 1px 1px #999;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2);
    font-family: sans-serif;
        font-weight: bold;
}
.extra {
    color: #6875B8
}

JavaScript

$(window).load(function(){
function rnd(min, max) { return (Math.random() * (max - min + 1) + min).toFixed(0) + 'px'; }

    var txt = [//'0text'   '1font-size em'
        ["7-9 февраля 2012 г",'.8em'],
        ["Крокус-Экспо, Москва",  '.69em'],
        ["14-я выставка и конференция",'.51em'],
        ["CSTB'<b style='color:red'>2012</b>",'1.489em'],
        ["Спутниковая связь",'.79em'],
        ["Широкополосный интернет<br>ИндиVSAT",'.550em'],
        ["Коллективный интернет",'.64em'],
        ["VSAT + Wi-Fi",'1.21em'],
        ["Новые партнерские<br>программы",'.77em'],
        ["Приглашаем на<br>стенд AltegroSky",'.9em'],
        ["павильон 1,<br>зал 2,<br>стенд №212",'.9em']
    ];
    var extr = /^(0|1|2|3|8|10)$/;
    var widt = $('#baer').width();
    var heig = (widt * 0.4375).toFixed(0);
    $('#baer').height(heig) //построение пропорций сторон из ширины
    .css({fontSize: (widt / 8).toFixed(0) + 'px'}) //калибровка шрифта
    .click(function () { top.location.href = 'http://www.altegrosky.ru/new_406_detail.html'; }).append('<div>');
    var i = -1;
    (function go() {
        if (i >= txt.length - 1) { i = -1; } i++;
        if (extr.test(i)) { $('#baer div').addClass('extra'); }
        else { $('#baer div').removeClass('extra'); }
        dela = (txt[i][0].length * 70 ).toFixed(0);
            $('#baer div').html(txt[i][0]).css({
                fontSize: txt[i][1],
                marginTop: rnd(-heig,heig),
                marginLeft:rnd(-widt,widt),
                opacity:0
            }).show().animate({
                marginTop: ((heig-$('#baer div').height())/2).toFixed(0),
                marginLeft: 0,
                opacity:1
            }, dela).delay(dela).fadeOut(dela, function () {
                go();
            });
    })();
});//]]>