@architawr
"Ok, Google" и все твои проблемы решены

Как оптимизировать css-анимацию?

Здравствуйте, тостеровчане!
Есть mouse parallax анимация на 15-20 svg-элементах, код ниже. Проблема в том, что анимация иногда слегка подвисает, как можно этого избежать?

Код JS:
move($event) {
      const mouseX = $event.pageX,
        mouseY = $event.pageY,
        w = this.particlesBgWidth / 2 - mouseX,
        h = this.particlesBgHeight / 2 - mouseY,
        l = document.querySelectorAll(".layer"); // поиск элементов, их около 20

      if (this.particlesBgWidth > 900) {  // проверка ширины экрана, чтобы на экранах < 900 px параллакса не было
        for (var i = 0; i < l.length; i++) {
          let t = i !== 0 ? i : 1; // чтобы в вычислениях ниже i не было равно 0
          l[i].style.transform = `translate3d(${w / (t * -6.2)}px, ${h /
            (t * 4.5)}px, 0) rotate(${l[i].dataset.deg}deg)`; // чтобы для каждого элемента был свой трансформ, исходя из порядка
        }
      }
    },

Стили:
.layer {
    position: absolute;
    transition: transform ease 0.2s;
    will-change: transform;
  }


Смотрел на перерисовку слоев в devtools-ах, но вроде бы слои не перерисовываются, мне кажется, что дело в вычислениях в JS, но я не уверен
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
@MoniKossa
для начала вынести l = document.querySelectorAll(".layer"); // поиск элементов, их около 20
зачем каждый ты каждый раз ищешь элементы?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы