|
Сообщение от Dilettante_Pro
|
|
все случайные параметры у вас задаются один раз, вне функции создания нового слова
|
<!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>
<style type="text/css">
body{
position: relative;
width: 100%;
height: 100%;
}
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 10% auto;
text-align: center;
}
.word{
position: absolute;
top: 20%;
left: 20%;
/*animation: wordLife 3s 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", "sddfsdf", "Test2dfdf", "Test3dd", "Test4df", "Test5fsdf", "Test6sdf",];
var len = arr.length - 1;
var $box = $('.box'),
boxW =$box.innerWidth(),
boxH =$box.innerHeight();
var $txt = $('p'),
txtW = $txt.innerWidth(),
txtH = $txt.innerHeight();
var winW = $(window).width(),
winH = $(window).height();
console.log(winW + " =w");
console.log(winH + " =h");
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),
radLeft = randomInteger(0, winW);
console.log( randR+ " =randR ");
console.log( randG+ " =randG ");
console.log( randB+ " =randB ");
console.log( randTextSize+ " =randTextSize ");
$txt.clone().css({'fontSize' : randTextSize + 'em',
'color' : 'rgb( '+ randR + ',' + randG + ',' + randB +' )',
'top' : randTop,
'left' : radLeft
}).text(arr[randNum]).appendTo('body');
};
setInterval(createWord, 200);
}
</script>
</body>
</html>