Функция случайных переменных
Доброго времени суток, имеется вот такой код:
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); } } В результате выполнения кода, мы видим одно слово, а как можно сделать список слов, что бы случайные слова вылетали? Пытался сделать по примеру цвета (как здесь функция работает), но пока к успеху не пришел. |
karakym,
строки 56 - 63 const word = "Доброго времени суток имеется вот такой код".split(" "); for (let i = 100 - 1; i >= 0; i--) { const p = pi.cloneNode(true); p.innerHTML = word[Math.random()*word.length|0]; initPi(p); p.style.animationDelay = -(Math.random() * 100) + 's'; body.appendChild(p); } |
Спасибо, то что нужно!
|
Часовой пояс GMT +3, время: 15:00. |