Как оптимизировать эффект паралакса при движении мышью?

Question

Я хочу, чтобы мой фон при перемещении курсора сдвигался в противоположную сторону, для этого делаю:

let bg = document.querySelector('.bg');
window.addEventListener('mousemove', function(e) {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;  
    bg.style.transform = 'translate(-' + x * 25 + 'px, -' + y * 25 + 'px)';
});

Все хорошо, но решение очень требовательно к ресурсам (ноутбук греется, старые компьютеры подлагивают). Как это можно оптимизировать?

Answer 1

Можно использовать requestAnimationFrame

const block_1 = document.querySelector('.block-1');
const block_2 = document.querySelector('.block-2');
const block_3 = document.querySelector('.block-3');

let y = 0,
  x = 0,
  endX = 0,
  endY = 0,
  widthWindow = window.innerWidth,
  heightWindow = window.innerHeight,
  myReq, flagReq = false;

window.addEventListener('resize', () => {
  widthWindow = window.innerWidth;
  heightWindow = window.innerHeight;
});

window.addEventListener('mousemove', (e) => {
  endX = widthWindow / 2 - e.x;
  endY = heightWindow / 2 - e.y;
  if (flagReq === true) {
    flagReq = false;
    parallax();
  }
});

function parallax() {
  myReq = requestAnimationFrame(parallax);
  if (Math.abs((endX - x) / 20) < 0.01) {
    cancelAnimationFrame(myReq);
    flagReq = true;
  }
  x += (endX - x) / 20;
  y += (endY - y) / 20;

  block_1.style.transform = `translate(${x / 3}px, ${y / 3}px)`;
  block_2.style.transform = `translate(${-x / 2}px, ${-y / 2}px)`;
  block_3.style.transform = `translate(${-x / 1}px, ${-y / 3}px)`;
}

parallax();

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.block__parent {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.block {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
}

.block-1 {
  background-color: lightgreen;
}

.block-2 {
  background-color: lightblue;
}

.block-3 {
  background-color: orange;
}

<div class="block__parent">
  <div class="block block-1"></div>
  <div class="block block-2"></div>
  <div class="block block-3"></div>
</div>

БЛОГ НА HUSL

Как оптимизировать эффект паралакса при движении мышью?

Ответы (1 шт):