Показать сообщение отдельно
  #1 (permalink)  
Старый 03.07.2017, 10:34
Аватар для karakym
Профессор
Отправить личное сообщение для karakym Посмотреть профиль Найти все сообщения от karakym
 
Регистрация: 21.02.2010
Сообщений: 213

Функция случайных переменных
Доброго времени суток, имеется вот такой код:
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);
  }
}

В результате выполнения кода, мы видим одно слово, а как можно сделать список слов, что бы случайные слова вылетали?
Пытался сделать по примеру цвета (как здесь функция работает), но пока к успеху не пришел.
Ответить с цитированием