Answer the question
In order to leave comments, you need to log in
How to optimize css animation?
Hello toasters!
There is a mouse parallax animation on 15-20 svg elements, the code is below. The problem is that the animation sometimes freezes a little, how can I avoid this?
JS code:
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;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question