Спасибо за подсказки.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body{
position: relative;
width: 100vw;
height: 100vh;
}
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
text-align: center;
}
p{ display: block;
margin: 0;
padding: 0;
width: 50px;
height: 50px;
}
.word{
position: absolute;
animation: wordLife 7s linear ; /* подключить*/
animation-fill-mode: forwards;
}
@keyframes wordLife {
0%{
opacity: 0;
}
25%, 75%{
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>>
</head>
<body>
<div class="box">block</div>
<p class="word"></p>
<script type="text/javascript">
window.onload = function () {
var arr = ["Test0", "Test1", "Test2", "Test3", "Test4", "Test5", "Test6", "Test7", "Test8", "Test9", "Test10", "Test11", "Test12"];
var len = arr.length - 1;
var $box = $('.box'),
boxW =$box.innerWidth(),
boxH =$box.innerHeight();
var $txt = $('p'),
txtW = $txt.innerWidth(),
txtH = $txt.innerHeight(),
elements = 30; // сколько элементов я хочу что б показывало в окне браузера
var winW = $(window).width(),
winH = $(window).height();
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min + 1)
rand = Math.round(rand);
return rand;
};
function createWord(){
var randNum = randomInteger(0, len),
randTextSize = randomInteger(155, 400)/100,
randR = randomInteger(0, 255),
randG = randomInteger(0, 255),
randB = randomInteger(0, 255),
randTop = randomInteger(0, (winH - txtH)),
radLeft = randomInteger(0, (winW - txtW));
var txtValue = $txt.clone().css({'fontSize' : randTextSize + 'em',
'color' : 'rgb( '+ randR + ',' + randG + ',' + randB +' )',
'top' : randTop,
'left' : radLeft
})
txtValue.text(arr[randNum]).appendTo('body');
console.log( txtW + " = txtW ");
console.log( txtH + " = txtH");
};
function limitWords () {
if ($('p').length < elements) {
createWord()
} else{
$('p').first().remove();
}
}
setInterval(limitWords, 500);
}
</script>
</body>
</html>
Осталось непонятными два вопроса.
1) Как ограничить поле вывода слов размером экрана браузера. ( randTop = randomInteger(0, (winH - txtH)) работает как-то не правильно)
2) Как сделать так что б слова не наплывали поверх блока.
У
ksa в примере как-то всё очень хитро записано, да и оно не совсем то что мне надо