Доброго времени суток, имеется вот такой код:
function random(min, max) {
return min + Math.random() * (max - min);
}
function randomDist(min, max, iterations) {
let total = 0;
for (let i = iterations - 1; i >= 0; i--) {
total += random(min, max);
}
return total / iterations;
}
function loop(val, min, max) {
const p = max - min + 1;
let mod = (val - min) % p;
if (mod < 0) {
mod += p;
}
return min + mod;
}
function initPi(p) {
const s = p.style;
s.top = randomDist(0, 100, 1) + '%';
s.left = randomDist(0, 100, 1) + '%';
s.color = color();
}
let color = (() => {
const colors = ['#FFCC00',
'#FFCC33',
'#FFCC66',
'#FFFF00',
'#FFFF33',
'#FFFF66',
'#FFFF99',
'#FFFFCC'
],
l = colors.length;
let i = 0;
return function() {
i = loop(++i, 0, colors.length);
return colors[i];
};
})();
const body = document.querySelector('#head-anim');
const pi = document.createElement('div');
pi.className = 'pi';
pi.innerHTML = 'Электромобили';
for (let i = 100 - 1; i >= 0; i--) {
const p = pi.cloneNode(true);
initPi(p);
p.style.animationDelay = -(Math.random() * 100) + 's';
body.appendChild(p);
}
document.querySelectorAll('.pi').forEach((pi) => {
pi.addEventListener('animationiteration', (e) => {
initPi(e.target);
});
});
Его HTML и CSS:
<div id="head-anim"></div>
@import url('https://fonts.googleapis.com/css?family=Play');
body,
html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
font-family: 'Play', sans-serif;
}
#head-anim {
position: relative;
top: 0;
left: 0;
background: #000;
width:100%;
height:20%;
perspective: 20px;
transform-style: preserve-3d;
}
.pi {
position: absolute;
font-size: 50px;
font-family: 'Play', sans-serif;
animation: flyby 5s linear infinite;
}
.control {
position:fixed;
width:100px;
top:50%;
right:-120px;
padding:20px;
transform:translateY(-50%);
transition:.5s;
background:rgba(255,255,255,.5);
z-index:999;
}
.control:hover {
right:0;
}
@keyframes flyby {
0% {
opacity: 0;
transform: translate3d(0, 0, -50px);
}
30% {
opacity: 0;
transform: translate3d(0, 0, -50px);
}
35% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate3d(0, 0, 100px);
}
}
В результате выполнения кода, мы видим одно слово, а как можно сделать список слов, что бы случайные слова вылетали?
Пытался сделать по примеру цвета (как здесь функция работает), но пока к успеху не пришел.