JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:361px; height:101px" id="baer"></div>
CSS
#baer {
border: 1px solid #6875B8;
/* width:400px; назначается в теге*/
background-image: url('http://rghost.ru/private/37871017/6b719d81649c3f501e609f559cea2156/image.png');
overflow:hidden;
cursor:pointer;
color: white;
}
#baer div { /*background:red; */
white-space: nowrap;
text-align: center;
text-shadow: 2px 2px 2px black;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2);
font-family: sans-serif;
font-weight: bold;
}
JavaScript
$(function () {
function rnd(min, max) {
return (Math.random() * (max - min + 1) + min).toFixed(0) + 'px';
}
var txt = [ //'0text' '1font-size em'
['C-COM Satellite Systems Inc.<br>в Москве, 14-17 мая 2012, "Связь-Экспокомм"<br>Павильон № 8, зал 3, стенд 83C25 ', '.3em']
];
//var extr = /^(0|1|2|3|8|10)$/;
var widt = $('#baer').width();
$('#baer').width(widt); //ставим ширину если её не прописали (фикс для IE)
var heig = $('#baer').height();
// var heig = (widt * 0.4375).toFixed(0);
var i = 0;
$('#baer').height(heig) //построение пропорций сторон
.css({fontSize: (widt / 8).toFixed(0) + 'px'}) //калибровка шрифта
//.click(function () {top.location.href = 'http://www.altegrosky.ru/new_406_detail.html';})
.click(function () {top.location.href = 'http://www.altegrosky.ru/new_489_detail.html';})
.append('<div>');
(function go() {
// 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();
});
if (i >= txt.length - 1) { i = -1; } i++;
})();
});