How can animation be optimized (parallax on mouseMove)?

Question

css

Hello.

https://codepen.io/khlopchyna/pen/JpENmj?editors=1111

How can I optimize the execution of this animation?
If you open the console, you will understand what I'm talking about.

What did I do? - rounded the number over which miscalculations are performed.
Made EventListener only on the block with Background.

But when I move the mouse outside of this container, it still counts. Even if you wait, it still counts the value, it's just that it's the same and visually difficult to catch, but you can see it in the console.
And one more thing - when there is a shift, for example from 19 to 20, before the end of the animation, the script for a very long time counts exactly the last one, which is almost invisible squeak and its *.xxx from the number.

Answer 1

var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 30;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x.toFixed(0) + 'px, ' + y.toFixed(0) + 'px) scale(1.1)';
console.log(translate)
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$('.wrap').on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY)).toFixed(0);
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
});
moveBackground();

You can check for the previous value and not count further. You can implement the mousedown event and remove the cancelAnimationFrame animation.
Outside the container is not considered, everything is fine.