Управление CSS-анимацией с помощью ванильного JavaScript - PullRequest
Новая
       33

Управление CSS-анимацией с помощью ванильного JavaScript

1 голос
/ 23 июня 2019

Я пытаюсь написать повторно используемую функцию JS, которая управляет CSS-анимацией на нескольких фигурах. Я сделаю все возможное, чтобы объяснить, чего я пытаюсь достичь.

Цель состоит в том, чтобы контролировать несколько вещей:

  • param1: количество генерируемых элементов (форм) li
  • param2 и param3: диапазон чисел для произвольной продолжительности анимации для каждой сгенерированной фигуры
  • param4 и param5: диапазон чисел для случайного левого поля для каждой сгенерированной фигуры

Я хочу использовать эту функцию на разных страницах веб-сайта. Например, я хочу, чтобы фигуры были частью всего фона на главной странице, но на другой странице создайте столб анимированных фигур рядом с некоторым текстовым содержимым.

HTML 

<ul id="bg_list">
</ul>

CSS 

:root {
  --animation-duration: 2s;
  --margin-left: 5px; 
}

#bg_list {
  position: absolute;
  top: 0;
  left: 0;
  overflow: none;
  width: 80%;
  height: 92%;
}


#bg_list li {
  position: absolute;
  display: inline-block;
  list-style: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(27, 23, 49, 0.5);
  bottom: -10px;
  overflow: none;
  animation: animate var(--animation-duration) linear infinite;
  margin-left: var(--margin-left);
  z-index: -1;
}


@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 0.2;
      border-radius: 0;
  }
  50% {
    opacity: 0.5;
  }
  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 1;
      border-radius: 50%;
  }
}

JS 

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");
  var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
  var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

  for(let i = 0; i < x; i++) {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('--animation-duration', duration + 's');
    li.style.setProperty('--margin-left', margin + 'px');
  }
}

bgTriangles(5, 20, 10, 500, 5);

Приведенный выше код в основном работает, что вы можете увидеть, обновляя страницу, однако я не получаю ожидаемое количество фигур, и кажется, что они накладываются друг на друга, вместо того, чтобы получать случайную анимацию для каждой.

Вот демонстрация этого: ручка

1 Ответ

2 голосов
/ 23 июня 2019

Вы делаете это почти правильно, с одним небольшим исключением: ваши случайные числа вычисляются один раз перед циклом, и каждый треугольник получает одинаковую длительность и запас.Вот как изменить ваш код, чтобы он работал: 

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");

  for(let i = 0; i < x; i++) {
    var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
    var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('animation-duration', duration + 's');
    li.style.setProperty('margin-left', margin + 'px');
  }
}

Чтобы было понятно.Я переместил следующие две строки: 

var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

Они сейчас внутри цикла, в самом его начале.Никаких других изменений не требуется.

А вот и ваша ручка обновлена: https://codepen.io/anon/pen/RzVVmm

...